Smooth Scrolling "Back To Top" Button for Blogger

scrolling back to top buttonFinally yet another exciting trick to create a smooth scroll to top button for BlogSpot blogs. We designed and released many buttons and tutorials on back to top/bottom buttons but they were all static and had no fade out effects and smooth scroll effects. Luckily we just discovered a cool jquery script that does all the work. A back to top button is crucial for a blog or site because visitors enjoy easy site navigation so this button will provide them with this ease. We have kept the installation process a one step process. 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 > Design
  2. Choose HTML/JavaScript widget
  3. Paste the following code inside it


<script type="text/javascript" src=""></script>

<script type="text/javascript" >

* Scroll To Top Control script- © Dynamic Drive DHTML code library (
* Modified by
* This notice MUST stay intact for legal use
* Visit Project Page at 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="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},

        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
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);

        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'})

        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
        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])
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            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})
            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
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                return false
            $(window).bind('scroll resize', function(e){



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:back to top

back to topscroll to topscroll to top

     4.   Save the widget and drag it near the footer or any bottom position.

      5.  View your blog to see the magic.


I this little trick works for all of you. If you have any questions on how to adjust the position and fade duration then please let me know. I didn't mention them for simplicity. Please do a favour by sharing it with your friends on FB and G+. Peace brothers. :)

Need Quick Help within 24 Hours? ASK NOW

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

76 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. to many code there :(

    i found a more minimalist then this..

    jQuery(document).ready(function($) {

    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);

  2. @Muhd Firdaus

    <a href="#comments" class="scroll">Scroll to comments</a>

    just sharing :)

  3. please mohammed i have sent you the template please help me man please

  4. @Muhd
    Indeed your code works too as I shared even smaller than this on this post but they don't have fade in and fade out effects along with fade duration. Further this script does not gives a quick jump but rather it takes visitors smoothly by scrolling gently to the top. Hope this makes sense now. :)

    I will check it tonight brother.

  5. Bro.. I like your site, can you increase the loading speed?

  6. Hi thnkyou very much its work for me :)
    Visit my blog
    i need backlinks :)

  7. Chek out mine

  8. WOW...........
    i done it in My blog
    thank you so much sir......../

  9. Thank You, its great!

  10. Thanks for this script, been looking for a back-to-top button with easing and custom image the whole day! It works great, have a look at

  11. Thanks i applyed it on my blog check it i am from pakistan great blog

  12. @ahmed safwan

    Salaam alaikum, friend

    Thanks so much for this work; it was the first page I landed on when searching for this awesome feature, as I have very long pages on my Transformers weblog, and it can be tedious to scroll back to the top manually. Thanks a bunch,

  13. Thanks a lot Mohammad, i've mplemented it on my blog too, cheers from Greece!

  14. Thanks man, I used it on my blog

  15. hi. i have try it, but it may crash with my tab javascript. i dont know what the problem. (sorry for my english by the way)

  16. hi.. i comment again for tell you that its work for my blog. i just remove the 2 firts lines because i already have jquery script script. thanks.

  17. The image does not appear ??
    Why , can u help me ??

  18. @Thomas

    Very cool resource! I am using one for my friends article marketing blog, which he tasked me to spruce up. Had a little trouble getting the code to render correctly, so it goes out from time to time. But when it does work, it allows us to put many posts on one page. Great job!

  19. I want to bring it to the middle of my to do that?

  20. Thank you very much! Works perfectly!

  21. awesom check out mine i did it in my blog

  22. Hello! I am in Loooove with your blog, all widgets works PERFECT, but i am having a little trouble with this one, even it works, when i place it in the right sidebar unwrapped the multitab menu and when i place it in the footer, left sidebar, below posts or anywhere else stops the slideshow, what can i do???? please help me. THANX!

  23. Nice trick..

  24. Thanks for giving me the code. I had made some images. Plz check this : The UP Style scroll back top buttons for blogger -

  25. This comment has been removed by the author.

  26. thank you so much.............

  27. Topup Bangladeshi mobile from anywhere in the world by following this site

    its easy and reliable

  28. Just added one to my blog <a href="" target="_blank">Supportive Posts</a> It's awesome! Thanks :D I already shared ur post on my G+ page and +1'd many of your pages. Thanks so much...

  29. The problem with this trick is that with different screen resolutions the button appears in different places. So, if your resolution is big (let's say 1920x1080) and you adjust the position of your button according to your resolution, the button may overlap your blog's content for visitors with smaller resolution (let's say 1024x768 (my resolution)). And the opposite, if you adjust the button for small resolution it will go far away from your content for visitors with higher resolutions, which doesn’t look aesthetic.

    Is it possible to make a fixed button which position is determined according to the blog’s content and not the screen sides, so that it remains in the same proportions according to the blog, with the different resolutions?

  30. This works very nicely for my Fage Greek Yogurt diet site. I thank you for taking the time to set it up in an easy to read format.

  31. Still going strong after all these months. Alot of times I find that code i use from another site starts to mess up after half a year has passed.


  32. This comment has been removed by the author.

  33. This comment has been removed by the author.

  34. you can adjust it in these codes > controlattrs: {offsetx:5, offsety:5}

  35. amr mohammed

    your blog amazing
    i tried to do some of your triks at my blog

    i hope to visit it

  36. This worked beautifully! Thank you!!! :)

  37. Thanks a lot. .Works like charm on my blog too. . .

  38. thank you so much!

  39. Brother, how can I change the back to top to the left side of my screen? Or any idea to explain where is the script to change its location? I really appreciate it.

  40. hello ..Mohammad Mustafa Ahmedzai bro i am back again..
    there is a problem that how can i make the back to top widget same as urs that is a little bit to up and oblique..

    can u provide me the code of ur back to top widget

    i have also liked and followed u bro
    hope u will help me and u can mail ur back to top code in


  41. Thank you so much for sharing this HTML code!!! I've wanted to add this feature to my blog since seeing it on Pinterest! I will be sharing this with my readers soon and will link back to here so they know where I found this wonderful code!!! THANK YOU again!!!

    Blue Eyed Beauty Blog

  42. Yes this works Perfect!!!!
    But I have a Problem; The Facebook recommendations bar cover half of it, Can we move the recommendation bar towards little left or this scroll to top a little top.
    See me... << check Please if you don't understand me. :)

  43. Hi Mohammad
    i have trouble when i'm apply this trick, my width of blog has change ... Can u help me resolve this isue?
    See Me -> thanks before !

  44. Salam, Nice tut and old too but i need to know if i want my back to top image in the footer as you,ve done with your blog, but its text back to top , but the main thing to notice it that it is fixed and not fade in fade out effect kindly can you give me the code or instructions ,expecting answer fast :)

    H4ck3r Cracks

  45. thank you its useful
    please visit my blog

  46. How To Setting Position Image Button? Help!!!
    Visit My Blog :
    Thank You

  47. It worked for me - - Thank you so much! :)


  49. AOA, Today I have apply this widget in my blog.. but the button is appearing at end corner not with the post area.. what should i do?? blog link:

  50. HI! Thanks so much for this! Question ~ for some reason the html text is showing up as well ~ my arrow is working but what am I missing to cause it to have text show up? Thanks!!!

  51. Woo-hoo! This one actually worked :D
    Thank you

  52. This worked like a charm! now if only i can figure how to move it inside the border. Haha! Thanks!

  53. Thank you for this useful and creative tool. It's awesome. Thanks a lot

  54. However, I need to have it at the center of the page so my viewers can locate it easily. Kindly mail me the steps to do that: Thanks again.

  55. Hi, this was super easy, and thank you for that. Got an image off the net to match my class blog's theme perfectly but its way to big. is there a way to make it smaller within this script?

  56. Great!!!!! Thanks a lot for sharing this
    Tiny Serval

  57. Worked great in my site! Thanks for the tutorial! :)

    back to top buttons for blogger