Add A Simple Back To Top Button In Blog

Hello friends , In this tutorial we will discuss about adding a simple back to top button to a blog. Back to top buttons are also known as 'Scroll to Top' buttons. Did you know why are the back to top buttons are used? don't know.. okay let me explain, when you read a long post about 2000 words you need to scroll down rapidly to go upward this takes a lot of time to go up while this , the back to top buttons are used , in a single click you reach to the top of the page and you don't need to scroll up again. So many of websites providing a scroll to top button, but why would you choose our button? No answer.... Okay i will tell you , in case you copy the script of go to top button from other website , they link their website to your blog, so , indirectly it means that they are taking a lot of time and they link to your website means they are creating backlink from your blog. So by using our Script you doesnot have to do something and this script is very light in weight and take very less time to load web page. And comparing from other buttons our buttons are very special made from photoshop and they are easy to instrall on your blog . So after reading this.. You are ready to create a Custom or simple Back To Top Button for Your Blog. So lets begin-

How To Create A Custom Back To Top Button On Your Blog

Follow these Steps below to add a custom back to top button-

1. Go to Blogger , and sign in.

2. Go to Dashboard>Layout>Add A Gadget.

3. In the Gadget List Select the HTML JavaScript Gadget.

4. Now paste the following Script in that gadget-

<script type="text/javascript" >
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/AVvXsEgjFlZJNTksLZVjpzHMinCaOWp1KN88BV-dri5FKGZv_gO57xEqpQjE3nfa1DTVoD3MrXdyjvAp0rsv1vlrd4FK0i6BIZVmU8GpxGCDRBsPbK6IqNjJmZA0toUG_gPHF9So1nyBChItx_Sk/s1600/back-to-top.png" />', //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" style="z-index:9999;">'+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>

5. You Can Change The Back To Top Image by replacing the highlighted URL .
Here Are Some Buttons Use Their URL.

Or You Can Download Our Back To Top Button Pack 

                Click Here                Password- ht4u

6. After Choosing your desired image Hit on Save button.

7. Now you are done , Now visit your site again, the back to top button has been added on your blog.

     Okay ,, Have Fun.

Need Help

I think that i had described this post very carefully and userfriendly , but in case you have any problem with it or the script is not working on your blog then you can inform us by commenting below or fill our contact form.

Share This

Related Post