April 23, 2014

Wednesday, April 23, 2014
Easily add Smooth 'Scroll To Top' button in Blogger
If you have very very long posts, after reading you post that will very boring to reach to top of the site. So adding a Back top top button in your Blogger site is very useful to your visitors. You can add two type of Back to top button to reach top of the page Static back to top buttons and Smooth scroll to top buttons. Static buttons are boring so add a Smooth scroll to top button (powered by jQuery) in your Blogger what generates very cool looking effect for reaching top of the site!

How to add Smooth 'Scroll To Top' button in Blogger

Smooth Back to top button setup has three steps. Read on-

Step 1: Add the jquery
  • First, Log in to Blogger, select your Blog, 
  • Go to 'Template' tab, Select ' Edit Html' 
  • Search (using Ctrl+F or Cmd+F) into code snippet <head>
  • Paste this Phrase under <head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

  • Save template, Then

Step 2: Install it
  • Go to 'Layout' tab, select 'add a gadget', 
  • Select 'html/javascript' than copy and paste the following codes in content box-

.ks-back-to-top {
    position: fixed;
    bottom: 2em;
    right: 15px;
    text-decoration: none;
    padding: 1em;
    display: none;
<img class="ks-back-to-top" src="Image Url" />
<script type="text/javascript">
jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
        } else { //www.crawlist.blogspot.com

    jQuery('.ks-back-to-top').click(function(event) {
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;

Step 3: Install the Button
Now ten different of 'Back to top' button images code given below, copy your desired Image url and paste link in Image url. 'Save html/javascript' gadget

Style 1 : http://goo.gl/hXP25U
How to add smooth back top top button in blogger

Style 2 : http://goo.gl/uS17vC
How to add smooth back top top button in blogger

Style 3 : http://goo.gl/hQmgkt
How to add smooth back top top button in blogger

Style 4 : http://goo.gl/OgQoxH
How to add smooth back top top button in blogger

Style 5 : http://goo.gl/uOKbj1

Style 6 : http://goo.gl/U97n9Z

Style 7 : http://goo.gl/jd4KqM

Style 8 : http://goo.gl/Silz50
How to add smooth back top top button in blogger

Style 9 : http://goo.gl/GBni0S

Style 10 : http://goo.gl/zVAD3q

And see your Smooth Scroll to top button in Live action.

Template compatibility and Faq-
Will work on almost every stranded structured template. Not compatible with Dynamic Templates .Also if you template already has the jquery code, don't copy paste the jquery code into template, skip step 1 just begin from Step 2 - see what happens.

Things you can do- 

  • If you want to change default button appearing area (default is 15px from web browser), just change 15px to whatever px you desire.
  • If you want to use custom Back top top image/icon, upload you image to any third party Image host (like Tinypic etc) and copy Image location url, paste link in Image Url.
Hope you liked it and working nicely don't forget to mention. Goodluck


Post a Comment

Copyright © 2013-16 Crawlist All Right Reserved
Designed By Me {K.Shazzad}