How to Add Smooth Go to Top Button For Blogger

Well Back to top Widget is very impressive and it reduces page load time.instead of scrolling a website or blog from bottom to top.Just clicking on the Button Will take us to the Top of the page.Simply i takes the viewer to the Top of the page when once clicked.

This will help your readers to Navigate better especially if you've Long pages and takes much time to load.The Best thing about this widget is that It appears only when the User Scrolls to bottom of the Page.and It disappears when he scrolls up.so Add this Widget to Your Blog and Make your Navigation a Bit easy. This widget is Easy to Install.it is a one step process.One can Easily Add this widget to their Blog.

So follow the below steps: 

How to Add Scroll to top Button to Blogger ?

1) First login to your Blogger > Dashboard .

2)Now Choose Design >Page Elements and Click on > HTML/JAVASCRIPT .

3) No Paste the Below Code in it .

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><br /> <script type="text/javascript" > /*********************************************** * Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * Modified by www.helperblogger.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/AVvXsEjgqwooD5Wv4lMHaD1q01Y1IzqD3E7JsYmWhW51ZF1ssPoLGFuW2dPf8deuGX21Js0vCQ3UQF4W_fKYVEJwwEwF5at2nPoHdHtvkYow7SscBbW31KeRdH9O-zGL9sLbfm1uINVtAru9_-U/s1600/hb-arrow-up.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>

Now if you want to Change the image and use your own then just change the Following Url


"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgqwooD5Wv4lMHaD1q01Y1IzqD3E7JsYmWhW51ZF1ssPoLGFuW2dPf8deuGX21Js0vCQ3UQF4W_fKYVEJwwEwF5at2nPoHdHtvkYow7SscBbW31KeRdH9O-zGL9sLbfm1uINVtAru9_-U/s1600/hb-arrow-up.png"



That's it.Now you're Done.Enjoy!