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="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)
* Modified by www.MyBloggerTricks.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="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>

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 »

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

  1. @Muhd Firdaus

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

    just sharing :)

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

    ReplyDelete
  3. @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. :)

    @Ahmed
    I will check it tonight brother.

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

    ReplyDelete
  5. Hi thnkyou very much its work for me :)
    Visit my blog http://freedownloadspcgames.blogspot.com
    i need backlinks :)

    ReplyDelete
  6. Thanks a lot Mohammad, i've mplemented it on my blog too, cheers from Greece!
    http://toxrisimo.blogspot.com/

    ReplyDelete
  7. 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)

    ReplyDelete
  8. 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.

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

    ReplyDelete
  10. I want to bring it to the middle of my page...how to do that?

    ReplyDelete
  11. This comment has been removed by a blog administrator.

    ReplyDelete
  12. 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!

    ReplyDelete
  13. 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?

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

    ReplyDelete
  15. amr mohammed

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

    i hope to visit it

    http://www.protectivegloves.net

    ReplyDelete
  16. This worked beautifully! Thank you!!! :)

    ReplyDelete
  17. 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.

    ReplyDelete
  18. 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 abhishek_luck19@hotmail.com

    regards,
    abhishek

    ReplyDelete
  19. 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!!!

    Helen
    Blue Eyed Beauty Blog

    ReplyDelete
  20. thank you its useful
    please visit my blog
    http://your-pts.blogspot.com/

    ReplyDelete
  21. 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: bloggingstate.blogspot.com

    ReplyDelete
  22. 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!!!

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

    http://KatrinaCrouch.Blogspot.com

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

    http://merryprintables.blogspot.com/

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

    ReplyDelete
  26. 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: ernikmelama@gmail.com. Thanks again.

    ReplyDelete
  27. 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?

    ReplyDelete
  28. its WOW.... thanks for sharing....

    ReplyDelete