How To Add Back To Top Button

Create a back to top button with smooth sliding effect to the top of a page is one of the functions that may be required by a blog or website. This function is made with a touch display and quite elegant.

This button has a significant role for a blog or a website with a huge contents by weight and has a long page. For a site that has a lot of information on their pages, this will make other contents exceeded, unwittingly scrolled further down the page.

While this button gives a good function, a way to jump to the top with easy and with a short time, rather than move it with the mouse wheel. This is one way to encourage users to explore more of the other contents.

VIEW Example

Smooth Scrolling To Top

If a page is difficult to navigate, may be it will make user immediately move to the other blog. This button is a very lite weight, and this key feature is also compatible for most common browsers.

Creating this key feature is quite interesting, may be useful. With the code below you can also edit as appropriate as you like, such as the effect, the speed as well and more.

The following tutorial shows how to create a back to top button easily and quite short, only takes a few minutes. If You are using Blogger, here are the steps.

1. Add the following script code in the head section or above </head> But if you have already applying this code, then skip this step. The code is very commonly used in various blogs with many versions, like 1.3.2, 1.4.4, 1.8.3 etc, but recommend use the latest version.

Jquery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>

2. Still in the same place - in head section, Add the following script before or above the </head>

Javascript Scroll Function

<script type='text/javascript'>
$(function() {
     $(window).scroll(function() {
          if($(this).scrollTop()>300) {$("#ScrollToTop").fadeIn()
          }
          else {$("#ScrollToTop").fadeOut();}
          });
     $("#ScrollToTop").click(function(){
          $("html,body").animate({scrollTop:0},400);return false
          })
});
</script>

Red color is the distance of button appears and hidden
Blue color is the speed when jumping to above page.

3. Add the following CSS code before or above ]]></b:skin> or </style> in The CSS style section

CSS Scroll Button

#ScrollToTop {
    text-align:center; 
    z-index:9999; 
    position:fixed; 
    bottom:40px; 
    right:30px; 
    cursor:pointer; 
    display:none; 
    opacity:0.7; 
    }
#ScrollToTop:hover {
    opacity:1; 
    }

Green color is the position of the button.

4. Find this code </body> and Add the following code somewhere before or above </body>

HTML

<div id='ScrollToTop'>
<img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUprxUw4N2tQVfP1zgAVdrQn-sqBpSbTvfFkQpHaNk_VkuoGV0h3Hv0WPOmpSt4noRH5dxydS_GEhdisGQwvLgIOcK4oGEz9y1BVoIMlFLG1lt3tjN-8cxB0xPVPZrwe7BoVjFHNS13GYj/s128/backtotop.png'/>
</div>

Pink color is the link of the image button, recommend to be replaced/saved and upload to your own upload site/server.

5. Save Template and see the results.

modifine