September 4, 2011

Widgets

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



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 »

70 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. to many code there :(

    i found a more minimalist then this..

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

    $(".scroll").click(function(event){
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    });
    });

    ReplyDelete
  2. @Muhd Firdaus

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

    just sharing :)

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

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

    @Ahmed
    I will check it tonight brother.

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

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

    ReplyDelete
  7. Chek out mine

    http://hakiz99.blogspot.com/

    ReplyDelete
  8. WOW...........
    i done it in My blog
    http://sadhakparivar.blogspot.com/
    thank you so much sir......../

    ReplyDelete
  9. Thank You, its great!
    http://tudatosebredes.blogspot.com/

    ReplyDelete
  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 http://eyesontheescape.blogspot.com/

    ReplyDelete
  11. Thanks i applyed it on my blog check it http://www.everfreetech.com/ i am from pakistan great blog

    ReplyDelete
  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,

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

    ReplyDelete
  14. Thanks man, I used it on my blog http://www.quasarworld.blogspot.com

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

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

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

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

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

    ReplyDelete
  20. Thank you very much! Works perfectly!
    http://blog.cassandraniki.com

    ReplyDelete
  21. awesom check out mine i did it in my blog
    http://mahajancollection.blogspot.in/

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

    ReplyDelete
  23. Nice trick..

    www.themobiforest.com

    ReplyDelete
  24. Thanks for giving me the code. I had made some images. Plz check this : The UP Style scroll back top buttons for blogger - http://www.netinfozblog.in/2012/06/35-up-style-scroll-back-to-top-buttons.html

    ReplyDelete
  25. This comment has been removed by the author.

    ReplyDelete
  26. thank you so much.............
    http://headerline.blogspot.com/

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

    http://www.bdtopup4u.com

    its easy and reliable

    ReplyDelete
  28. Just added one to my blog <a href="http://supportiveposts.blogspot.com/" 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...

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

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

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

    Endowment

    ReplyDelete
  32. This comment has been removed by the author.

    ReplyDelete
  33. This comment has been removed by the author.

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

    ReplyDelete
  35. 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
  36. This worked beautifully! Thank you!!! :)

    ReplyDelete
  37. Thanks a lot. .Works like charm on my blog too. . .
    www.renju-baby.blogspot.in

    ReplyDelete
  38. thank you so much!

    http://mmeeshell.blogspot.com

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

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

    regards,
    abhishek

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

    Helen
    Blue Eyed Beauty Blog

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

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

    ReplyDelete
  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

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

    ReplyDelete
  46. How To Setting Position Image Button? Help!!!
    Visit My Blog : http://sinemaloverz.blogspot.com/
    Thank You

    ReplyDelete
  47. It worked for me - http://roykawaiiza.blogspot.com/ - Thank you so much! :)

    ReplyDelete
  48. OPEN THIS PAGE and LIKE MY PAGES WANNA EARNING WHEN YOU LIKE MY PAGE AND BE HONESTLY HELP
    https://www.facebook.com/pages/Games-InstallPC-Games-And-Softwares/507943062636853

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

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

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

    http://KatrinaCrouch.Blogspot.com

    ReplyDelete
  52. 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
  53. Thank you for this useful and creative tool. It's awesome. Thanks a lot

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

    ReplyDelete

Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner

Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |