How To Add Smooth Scrolling Back To Top Button

Back to top button! It’s a cute tool for blog/ website, because it helps to scroll to top of your blog/ website from bottom/ footer instantly. It’s not a new tool for us, almost every website or blog has this nice feature. If your blog has a large number of posts in home page or if your blog so lengthy with lots of widget or huge amount of comments then some of your favorite readers might get bore when they want to go top of your blog by using mouse scroll button or browser’s vertical scroll bar. It’s a very essential thing for your readers to navigate your blog with comfort. Today we will show you how to add a fixed position smooth scrollable back to top button at your lovely blog.

Here we go…

Smooth scrolling "Back To Top" option for blogger blog

---

1. Sign in to Blogger blog

2. Click on your blog title

3.Click Layout from left side menu

4. Add a gadget HTML/JavaScript

5. Now paste the following code in the box.

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

    <script type="text/javascript" >

    /***********************************************
    * Visit Project Page at http://www.dynamicdrive.com for full source code
    * The code modified for blogger by http://www.shinemat.com
    ***********************************************/

    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:150, scrollto: 0, scrollduration:1500, fadeduration:[750, 150]},
        controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK5kHVHiUBeXe-mSAj2vIjMoLdmmSPAihgtFSBRJPhBcvBx5biBXlyGHNzsvbBdCSYg2HMKYiI8neGSgMwVvru8scnt8cXEoaoE3Ea9an7gRzTjM8NAinmh-ckkcxnwWL1NKYlUC7aO1o/s1600/backtotop.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">'+mainobj.controlHTML+'</div>')
                    .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                    .attr({title:'Click For Scrolling 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>

6. Click Save to done.

7. Drag this gadget at bottom position and click Save arrangement from top of the page. That's all.

Customization area

---

You can change the back to top image as your own choice. To do this just replace the image link with your own selected image link.

If you need any help, please ask us friendly. We will be glad to help you. Have a nice day!

Ashraful Haque Saimoom