Smooth Scroll To Top Button For Blog

One of my unique visitor Anjal Gajurel asked me for back to top button like mine for his new blog. So here it is, not only for him but all  of you.
You might have seen a button at the bottom of the page. Initially it doesn't appears but when we scroll down a bit it appears.


In this picture too i have indicated. The blue thingy button is what we call back to top or scroll to top button. Whenever a person clicks on it it scrolls back to top smoothly so it is named "Smooth Scroll To Top Button". It is so small that it doesn't occupies more space or affect any other widgets as well. More over it  also do not affect your loading speed. So its not a bad gadget. Instead it brings smile to your readers.
When you have long posts or your blog is long then user feel bore to return to top and so exit your site. But now no need to worry because this button helps to fix this problem and will surely lead ultimately to your site success. What are you waiting for then give it a trial as it is as easy as A,B,C...

• Sign in to your blogger account.
• Be forwarded to dashboard>design/lay out>page elements.
• There click on "Add A Gadget" wherever you like.
• Scroll down and click on Html/Java Script.
• Paste the below code in the content box and leave the title vacant;

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
/*********************************************** 
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 
* Modified by www.bloggingsentral.blogspot.com 
* This notice MUST stay intact for legal use 
* Visit Project Page at http://www.dynamicdrive.com for full source code 
***********************************************/
var scrolltotop={ 
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control 
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). 
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGkZ8lpWNgZfj_UAAxE2AQmDFYkvRW9ri4DOx1QDTXBFGUapasFDhbAOzKbbwhv7Vbf8r6-Wog7loGB-_I3H27_X1z_EfVEdt8xvtLRQbCdnKzztO4-CzR09Xw8N4AkC6O2eIq0HbHL0Q/?imgmax=800" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" 
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner 
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){ 
        if (!this.cssfixedsupport) //if control is positioned using JavaScript 
            this.$control.css({opacity:0}) //hide control immediately after clicking it 
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) 
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists 
            dest=jQuery('#'+dest).offset().top 
        else 
            dest=0 
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration); 
    },
    keepfixed:function(){ 
        var $window=jQuery(window) 
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx 
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety 
        this.$control.css({left:controlx+'px', top:controly+'px'}) 
    },
    togglecontrol:function(){ 
        var scrolltop=jQuery(window).scrollTop() 
        if (!this.cssfixedsupport) 
            this.keepfixed() 
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false 
        if (this.state.shouldvisible && !this.state.isvisible){ 
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) 
            this.state.isvisible=true 
        } 
        else if (this.state.shouldvisible==false && this.state.isvisible){ 
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) 
            this.state.isvisible=false 
        } 
    }, 
    
    init:function(){ 
        jQuery(document).ready(function($){ 
            var mainobj=scrolltotop 
            var iebrws=document.all 
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode 
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') 
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') 
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) 
                .attr({title:'Scroll Back to Top'}) 
                .click(function(){mainobj.scrollup(); return false}) 
                .appendTo('body') 
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text 
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text 
            mainobj.togglecontrol() 
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ 
                mainobj.scrollup() 
                return false 
            }) 
            $(window).bind('scroll resize', function(e){ 
                mainobj.togglecontrol() 
            }) 
        }) 
    } 
}
scrolltotop.init()
</script>

• Here i have included a small button picture by default.
• If you want to change it then just replace the bold, underlined and red text of the above code with your own image URL.
• But remember big images steals away your blog look.
• Save it by clicking on Save button.
• Now view your blog.
• Enjoy!!

So saw how easy it was. Just copy/pasting. Feel free to use it and share it to others. Remember to stay updated by subscribing below.

Thank You!!