Scroll to Top Button for Blogger Blogs

Add a Scroll to Top Button to Your Blogger Blog

A scroll to top button on your blog makes it easy for your visitors to scroll to the top of the page. The scroll to top widget, which I am sharing with you, is easy to add and you can add it within a minute to your Blogger blog. This button appears only when your visitor scrolls below from the top and it hides itself when your visitor is at the top of the page. The smooth scroll gives a cool look to your blog. Speed of the scrolling also varies and increases from top to bottom. The widget counts divs in your template and recognizes that where your visitors is currently on the page. After this, the speed of the scroll is determined. Suppose your visitor presses "Scroll to Top" button from the middle of the page, then the page slowly scrolls up. Alternatively, when a visitor presses the button from extreme bottom of your page, the page will scroll up at a higher speed. All these features make this button unique from a common button which rapidly takes you to the top when you press it. To add this cool button to your Blogger blog, follow the below simple steps:

1. Login to your Blogger dashboard

2. Select your blog and go to its layout

3. Add a new gadget as HTML/JavaScript using the below code

<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)
* 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/AVvXsEiiKecx1Rom26EZwZp6dkJPQb52dMJ-PZuIK5SPnv7Tbo_0DeLmuYZgQS09m4hWRjUM99OBd1phNs_ZxNsEfYP2ZCjlusA6kq16mbW1MFTZi_rKmFvHwDk4C5uvqNaFeeaqaA5Op_m6_PA/h120/scroll-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">+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>

 4. Save your gadget. You are all done!

Before adding the widget to your Blogger blog, you might like to view it in action that how it will appear on your blog. View Demo Here

                                             

Download here code

PASSWORD:  mr173.blogspot.com