SCROLL BACK TO TOP BUTTON FOR BLOGGER

A back to top button is important for a blog or site because visitors enjoy easy site navigation so this button will provide them with this ease. Please see this button in action towards the bottom right corner of this blog.

The best thing about this button is that it appears only when the user scrolls down the page and disappears as he scrolls up.

Add Scroll to Top button to Blogspot

1. Go To Blogger >Layout
2. Choose HTML/JavaScript widget
3. Paste the following code inside it

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

Replace IMAGE LINK with the image link of your back to top button. You can get several beautiful free buttons from our library. Download Back to top/bottom buttons. If you want a free image link then right click the buttons below and select "Copy image location" to fetch their links:

4.   Save the widget and drag it near the footer or any bottom position.
5.  View your blog to see the magic.

SOURCE: MYBLOGGERTRICKS

Kindly Bookmark this Post using your favorite Bookmarking service: