How To Add Back To Top Button In Blogger Blog

Back to top is the button once you clicked it navigate user to the top of the post or page. It is basically used for better scrolling, those users who don't to navigate using the scroll bars so they can use this button to reach to the top in less time. Those blogger who have to write long post or video blog where you post lots of image, so this button for your blog. Back to top button saves the time of your visitors, it also adds enjoyment factor to the blog as well. If you want to add back to top button to your blog you need to follow the steps carefully and then you will discover this button in your blogger blog.

How To Add Back To Top Button In Blogger Blog ?

Login to your blogger dashboard. Goto Layout click on Add a Gadget >> HTML/Java Script. Copy the following code and paste into it.

<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.probloggertricks.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="URL Goes Here" />', //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>

Customization

Now you can add different images for your back to top button. Here below i have provided few, you can also add you own image too if you want. Just replace any image URL in the code, replace "URL Goes Here" with your selected URL and then click on save button.

http://3.bp.blogspot.com/Jhm_YShNMoc/UujZWfBmHyI/AAAAAAAACSw/RG0ZAtfbUA8/
s1600/back+to+top+Gray+arrow.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRNMfSeYHfHS92w2hALMacO2r8zlJ2Nn9I20Jot31kVPclR8KnrJvISAnmwPKn3XHQJbgd1GQwhbw6zlBsLEww8pUWBKJPnNvIScJEAp7iZxcoEyLC6J-mubQf3TzDDbU-kCcuURQdn_Cm/s1600/back+to+top+paw+button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-6IAsy90lv88xdKwnbVPbgMUPAk1ge8de9D8f0yKe2NkEnGrZP1OKY0_qJa7Eejrl78NWosjpOwSG1Qm76F8Hx7jyhH6ssq3LWWPn9ktvYHPKlJq3gclhJQ3GZaB0hyphenhyphenpgeE_uPLytm0RV/s1600/Back+to+top+Circle.png

 I hope you like this article if you face any problem please do comment in the below box.