Easily add Smooth 'Scroll To Top' button in Blogger

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-

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

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


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

0 comments: