Back to Top

First
Go to the Admin CP => Display => Pictures and Colors > Colors > CSS Stylesheet

And put this code

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: 1000;
    right: 30px;
  background-color : #000;
  border-radius : 8px;
  -webkit-border-radius : 8px;
  -moz-border-radius : 8px;
}
#backtotop:hover {
  opacity  : 0.9;
}


You can change background-color or even add a image.

You can put this code in the templates or homepage message

Code:


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


If you use PunBB or PhpBB2 you can put the HTML code in the Templates overall_footer_end.

The completed Code:

Code:

<style>
#backtotop {
    bottom: 50px;
    color: #FFFFFF;
    cursor: pointer;
    display: none;
    font-size: 14px;
    opacity: 0.6;
    padding: 8px;
    position: fixed;
    text-align: center;
    z-index: 1000;
    right: 30px;
  background-color : #000;
  border-radius : 8px;
  -webkit-border-radius : 8px;
  -moz-border-radius : 8px;
}
#backtotop:hover {
  opacity  : 0.9;
}
</style><div id="backtotop">Back to Top</div>

Second
Go to the Administration Panel => Modules => HTML & JAVASCRIPT => Javascript codes management

Create a new javascript and paste this code:

Code:

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

Check list on all page
DEMO: you can see it on the right side on this forum.

Notice : This tutorial is copyrighted by Graphic Holdine. You may not publish it on anywhere without written permission from the administrators.