Back to top button For PunBB /PhpBB2

For a back to top button like the one you can see on this page when you scroll down follow these steps:
Theses steps are made using forumotion forums.

Step 1
Go to Acp->display->Templates->General->Overall_footer_end
press the gear across form Overall_footer_end

find this part of code

Code:

<!-- BEGIN switch_facebook_login -->

And paste this above it

Code:

<div id="backtotop">^ Back to Top</div>

press save
then back on the general templates page you should see a green plus arrow
press it to publish the template

Step 2
Go to ACP->Display-> Pictures and Colors->Colors ->CSS Stylesheet
if there is code in your style sheet leave it there and paste the following code at the top above the other codes if any are there  

Code:

#backtotop {
    bottom: 50px;
    color: #FFFFFF;
    cursor: pointer;
    display: none;
    font-size: 14px;
    opacity: 0.6;
    padding: 8px;
    position: fixed;
    text-align: center;
    z-index: 999;
    right: 30px;
    background-color : #000;
    border-radius : 8px;
    -webkit-border-radius : 8px;
    -moz-border-radius : 8px;
    }
    #backtotop:hover {
    opacity  : 0.9;
    }


 If you want to change the default color is Black and gray to change the back ground find the background-color: line and change the hexcode to one of your choice for a list of Hex codes visit here: http://cloford.com/resources/colours/500col.htm

Step 3 Go to ACP->Modules -> HTML & JAVASCRIPT -> Javascript codes management Add a new java script code with the following  this will allow the button to be displayed once the page is scrolled down.

Code:

       $(function() {
      $(window).scroll(function() {
          if($(this).scrollTop() != 0) {
            $('#backtotop').fadeIn();
         } else {
            $('#backtotop').fadeOut();
          }
      });
  
     $('#backtotop').click(function() {
          $('body,html').animate({scrollTop:0},800);
      });
   });

Step 4

Press save!!! now yor good to go!!