Add Smooth Sliding Back To Top Button On Blogger Blog

This is the another version of my previous post of adding back to top button on blogger. With just one click it will slide to the top of the blog smoothly.Before adding it on your blog you can view the demo first. Visit the view demo and scroll your mouse at the bottom of the blog and automatically back to top button will appear.So without wasting any time lets start.

For Older Blogger Interface: How To Add?

  • Go to Blogger>Design>Page Element
  • Click Add a Gadget option



  • Select HTML/JavaScript option. Paste the html code provided below.
  • Save the Gadget.

For New Blogger Interface: How To Add?

  • Go to Blogger (NoteIf  you are managing more than one blog then choose the blog you want to add News Widget)
  • Then go to Layout option
  • Click Add a Gadget option
  • Select HTML/JavaScript option. Paste the html code provided .
  • Save the Gadget.

Add Below Code On Your Blog

<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="Your Image Link" />', //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>
Note:
Replace Your Image Link with the desire image link provided below

Back To Top Button Images

http://3.bp.blogspot.com/-boyMcd8djcY/UKXzr0EbpWI/AAAAAAAAEqo/UEcbAwZbYKc/s1600/back+to+top_1.png
http://1.bp.blogspot.com/-Vn5jNZNp04E/UKXztLvy7NI/AAAAAAAAEqw/fmkKGTLclgs/s1600/back+to+top_2.png
http://3.bp.blogspot.com/-JiI-Nr-nkLE/UKXzuDaXYZI/AAAAAAAAEq4/o7ebTALSrP0/s1600/back+to+top_3.png
http://3.bp.blogspot.com/-22O3sB2LDs8/UKXzv9L2B_I/AAAAAAAAErA/4AGQN_BTsaY/s1600/back+to+top_4.png
http://2.bp.blogspot.com/-JVBbEmLo8q4/UKXzx8sXHqI/AAAAAAAAErI/CwCZL4EP8B0/s1600/back+to+top_5.png
http://2.bp.blogspot.com/-w9epjyCPaa4/UKXzy35_a-I/AAAAAAAAErQ/zvi1kx9oZrY/s1600/back+to+top_6.png
http://4.bp.blogspot.com/-HEVK3s6Iurs/UKXz0Mv100I/AAAAAAAAErY/Rhdx4COYMsE/s1600/back+to+top_7.png
http://1.bp.blogspot.com/-q2Oy2rOSTbk/UKXz2MVYjbI/AAAAAAAAErg/_6drvuRYzDg/s1600/back+to+top_8.png
http://3.bp.blogspot.com/-feI4sQIFIRw/UKXz36bWMpI/AAAAAAAAEro/R038dVTPh9Y/s1600/back+to+top_9.gif
  • Save the template and you are done.

COMMENTS

Name

Aastha Band,1,Alcatel,1,Android,17,Android One,1,Anju Pant,26,Apple,18,ARK,3,Badri Pangeni,1,Basanta Thapa,2,Bhojraj Kafle,2,Bima Kumari Dura,6,Bimal Raj Chhetri,2,Bindu Pariyar,5,Birahi Karki,1,Bishnu Khatri,2,Bishnu Majhi,8,Blogger,130,Blogger Templates,16,Blogger Widgets,57,Blogging Tips and Tricks,74,BQ,1,Car Price in Nepal,2,Celkon,4,CG TV,1,Colors,9,Computer Tips,58,Dashain,1,Dashain Tihar Songs,43,Datsun,1,Deepak Limbu,8,Dell,2,Deuda,1,Devi Gharti,30,English Jokes,24,Entertainment,948,Facebook,39,FIFA World Cup,2,Fonts,5,Free Giveaway,6,Free Icons,3,Free SMS,5,Gionee,3,Google,16,Google Plus,5,Guest Post,32,Gurung Movie,2,Hemant Sharma,4,Hemanta Shisir,18,Hero,1,Hindi Jokes,5,Hollywood,1,How To,41,Huawei,15,Hum Gaire,2,Increase Blog Traffic,14,Indira Joshi,4,Info Dose,425,Internet Tips,92,Intex,1,Jokes Collection,97,Juna Shrish,6,Jyoti Magar,1,Kalpana Devkota (Poudel),6,Kamal Shrestha,1,Karbonn,1,Kauda Song,2,Keshu Gurung,1,Khuman Adhikari,9,Komal Oli,1,Korean Songs,1,Krishna Gurung,2,Kulendra BK,3,Laptop Price,2,Lava,5,LG,6,LG TV,2,Load Shedding Schedule,19,Lok Dohori Songs,268,Magar Bhasa,2,Mandavi Tripathi,6,Manju Poudel,2,Manoj Raj,7,Melina Rai,1,Micromax,12,Microsoft,2,Mobile Phone Price in Nepal,102,Movie Promo,80,Muna Thapa Magar,7,Narendra Pyasi,17,Ncell,18,Nepali Cricket,7,Nepali Full Movie,110,Nepali Jokes,72,Nepali Model,1,Nepali Movie Songs,199,NTC,22,Obi Worldphone,2,Online Banking,4,Online Earning,7,Page Navigation,4,Panasonic,3,Panasonic TV,1,Pashupati Sharma,5,Philips TV,1,Photo Gallery,7,Pinterest,2,Pokemon Go,1,Pop and Adhunik Songs,206,Poster Release,103,Prakash Katuwal,4,Pramod Kharel,11,Purnakala BC,29,Puskal Sharma,1,Radhika Hamal,6,Rajan Gurung,1,Rajesh Payal Rai,6,Rajina Rimal,11,Raju Gurung,2,Raju Pariyar,5,Ram Krishna Dhakal,4,Ramji Khand,15,Rishi Khadka,1,Roila Song,4,Roshan Gaire,1,Sabina Gurung,1,Salaijo,4,Samsung,22,Samsung TV,4,Sarada Tamang,1,Sardarji Jokes,5,SEO Tips,6,Sharmila Gurung,2,Shiva Pariyar,20,Shreedevi Devkota,2,Sindhu Malla,1,Smart Phones,23,Smriti Pun,1,SMS,1,Software Download,14,Sony,3,Sony TV,1,Sudip Adhikari,1,Swaroop Raj Acharya,10,Tata,1,Technology,264,Teej Song,49,Tejas Regmi,2,Tika Pun,16,Top List,2,Trishna Gurung,8,TU Notice,10,TV Price in Nepal,10,Twitter,8,Two Wheeler Price,2,Udit Narayan Jha,4,Useful Tools,10,Useful Websites,73,Videcon,1,Wallpapers,4,Windows 8,2,WordPress,2,Xiaomi,6,Yam Chhetri,4,Yamaha,1,YouTube,13,ZTE,1,
ltr
item
GulmiResunga.com: Add Smooth Sliding Back To Top Button On Blogger Blog
Add Smooth Sliding Back To Top Button On Blogger Blog
Add Smooth Sliding Back To Top Button On Blogger Blog
http://3.bp.blogspot.com/-JiI-Nr-nkLE/UKXzuDaXYZI/AAAAAAAAEq4/o7ebTALSrP0/s1600/back+to+top_3.png
http://3.bp.blogspot.com/-JiI-Nr-nkLE/UKXzuDaXYZI/AAAAAAAAEq4/o7ebTALSrP0/s72-c/back+to+top_3.png
GulmiResunga.com
http://www.gulmiresunga.com/2012/11/smooth-sliding-back-to-top-button-for-blogger.html
http://www.gulmiresunga.com/
http://www.gulmiresunga.com/
http://www.gulmiresunga.com/2012/11/smooth-sliding-back-to-top-button-for-blogger.html
true
9098666623388878892
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy