Back to top button For Phbb3/Invision

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->General->Messages and Emails->Announcements
Changes the options on your screen to match the ones here:
- Activate announcements: Yes
- Announcements display: All pages
- Scrolling: Deactivate
+ Save

Step 2
Add a new announcement with the following code

Code:

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

Step 3
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 defualt 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 4
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);
          });
       });

Thats it press save and Check it out