‘Back to top’ link using jQuery 40

Posted by Lloyd on May 19, 2009 at 3:56 pm  

If you noticed I have a ‘Back to top’ link appearing at the bottom right everytime you scroll down the page. Wonder how it was made? I’ll tell you. It’s quite simple. What you need is a div containing the text, apply some css and add an event using jQuery.

First, create the div:

<div id="toTop">^ Back to Top</div>

Then add style to it, add this in your css file or inside <style> tag:

#toTop {
	width:100px;
        border:1px solid #ccc;
        background:#f7f7f7;
        text-align:center;
        padding:5px;
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;
        cursor:pointer;
        display:none;
        color:#333;
        font-family:verdana;
        font-size:11px;
}

And last, the jQuery code:

<script src="path/to/js/jquery.js"></script>
<script type="text/javascript">
$(function() {
	$(window).scroll(function() {
		if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});
</script>

There you have it! Simple isn’t it? :)
This works in Firefox 3.0.10 – 3.6.13, Internet Explorer 7 (Strict Mode) and 8, Google Chrome, jQuery 1.4.3.

Remember: On IE 7, your page needs to be at strict mode, just add a doctype at the top of your page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Hope that helps :)

Sorry no IE 6 support and also I think it doesn’t work in Quirks Mode (will see if it’s possible) :(

Let me know if something is missing in the code sample, for some reason it always gets deleted every time I update the post in the visual editor.

Check a working sample here.

Comments closed due to spamming. If you have questions, please send me an email which can be found here.

Comments

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comments are closed.

  1. flugfeld53 Fri, 03 Jul 2009 19:07:41 UTC

    very useful! thank you!

  2. andrew Sat, 04 Jul 2009 03:30:39 UTC

    Hello kabayan. Great code. It’s just want I’m looking for. Maraming salamat.

  3. JZ Wed, 02 Sep 2009 11:51:01 UTC

    phenomenal stuff Kabayan…clean + light

  4. olivia Fri, 30 Oct 2009 03:22:39 UTC

    This is so sleek its fantastic! I’m going to use it on my new site soon, modified slightly as a png button. Thanks a lot!

  5. Cath Mon, 09 Nov 2009 22:32:51 UTC

    I love this, couldn’t get it working in IE6 or 7 though!

  6. Lloyd Mon, 09 Nov 2009 23:02:12 UTC

    hey Cath, your page needs to be at strict mode to make it work in IE7, add this at the top of your page:

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    oh btw, sorry, it wasn’t designed for IE 6 :(

  7. Cath Tue, 10 Nov 2009 00:32:17 UTC

    Thanks for the reply, I’m using strict mode already but I managed to get it working by removing ‘body’ out of…

    $(‘body,html’).animate({scrollTop:0},800);

    It might be because I’m viewing IE7 through IE8′s Developer Tools.

    Yeah I’ve pretty much given up on adding nice effects to IE6 so I excluded it by using the below condition…

    $.browser.msie&&($.browser.version == “6.0″)&&!window.XMLHttpRequest;

    Thanks again, great post

  8. Julesfrog Sat, 21 Nov 2009 00:08:29 UTC

    Hello Lloyd!

    First of all, thank you for this great post. It’s a great piece of code! Very useful! I’m trying to rewrite it partially so instead of scrolling to the top it scrolls to a another section of the website.

    I changed the “0″ to “500″

    jQuery(function() {
    jQuery(this).pngFix();
    jQuery(window).scroll(function() {
    if(jQuery(this).scrollTop() != 500) {
    jQuery(‘#toTop’).fadeIn();
    } else {
    jQuery(‘#toTop’).fadeOut();
    }
    });

    jQuery(‘#toTop’).click(function() {
    jQuery(‘body,html’).animate({scrollTop:500},800);
    });
    });

    At this point, the button disappears only when the user hit the 500 mark. I would like it to disappear and stay invisible when the user reaches the 500 mark and anything below. I think it’s got to do with this line: if(jQuery(this).scrollTop() != 500) but I just don’t know the right “wording”.

    Also, at this point, when the page loads, the button doesn’t show unless you start scrolling down. Is there a way to make it appear when the page loads?

    I think this is all pretty simple stuff for you and any developers. It’s just too much for me at this point. I would appreciate your input and advice.

    Thanks!

  9. Lloyd Sat, 21 Nov 2009 14:23:00 UTC

    Hi Julesfrog, first off, thanks for dropping by :)
    I apologize that when you visited this post the sample code is busted and you had to look into the source code to get it.

    “I would like it to disappear and stay invisible when the user reaches the 500 mark and anything below.”
    - From what I understand you just want the link to appear when it reaches above the 500 mark, unlike my sample which is anything but zero. I changed the code a bit and made it less than or equal to 500 (or any value you wish) to keep the link invisible while the condition is true.


    <script>
    $(window).scroll(function() {
    if($(this).scrollTop() < = 500) {
    $('#toTop').fadeOut();
    } else {
    $('#toTop').fadeIn();
    }
    });

    $('#toTop').click(function() {
    $('body,html').animate({scrollTop:0},800);
    });
    </script>

    "Also, at this point, when the page loads, the button doesn’t show unless you start scrolling down. Is there a way to make it appear when the page loads?"

    - Why do you want it to appear on page load? When you load the page, the scroll point is at zero (that's less than 500 scroll mark and you want it hidden when it's lower). The code is supposed to show the link on scroll, it will check for the 500 mark as you scroll and showing it when it reaches above it, otherwise, it's hidden 500 to 0 mark (less than or equal). Let me know if I'm not following you :)

    Regards,
    ~Lloyd

  10. Giovanni Tue, 05 Jan 2010 06:29:08 UTC

    Does anyone know of a similar script that works in IE6?

    Thanks.

    Giovanni

  11. Ramalho Sun, 06 Jun 2010 06:26:46 UTC
  12. Lloyd Sun, 06 Jun 2010 23:21:17 UTC

    Ramalho! Thanks for sharing, that would definitely help those who needed it :)
    cheers brotha!

  13. lili Fri, 23 Jul 2010 05:39:04 UTC

    this is beautiful, thanks for sharing it. is it possible to include a “pulse” event on load?

  14. Lloyd Sat, 24 Jul 2010 13:15:16 UTC

    Lili, if it’s this plugin probably the code above that uses fadeIn():

    $('#toTop').fadeIn();

    will include a pulse effect. Not sure if that’s what you need.

  15. kadishmal Thu, 09 Sep 2010 11:11:57 UTC

    Overall, this is a great tip for me! However, I had to spend some 2 hours to get this code work. Actually, it looks perfect, but something was wrong on my side that jQuery didn’t trigger the click() function for that #toTop element. So, I almost gave up, when I found a solution. What I did is used the document.ready function. Here is the code:

    (function($){
    $(window).scroll(function () {
    if ($(this).scrollTop() != 0) {
    $(‘#toTop’).fadeIn();
    } else {
    $(‘#toTop’).fadeOut();
    }
    });
    $(document).ready(function(){
    $(“#toTop”).click(function(){
    $(‘body,html’).animate({ scrollTop: 0 }, 800, “swing”);
    });
    });
    })(jQuery);

    ^ Back to Top

    Thank you!

  16. Lloyd Sun, 19 Sep 2010 20:09:09 UTC

    yea, something’s up on your end probably, normally it should work fine without any changes needed. Glad you solved the issue :)

  17. Gaurav Sharma Thu, 07 Oct 2010 16:21:21 UTC

    YOU ARE AWESOME DUDE. THANK YOU SO MUCH. YOU ARE THE BEST. GOD BLESS.

  18. Pete Sun, 10 Oct 2010 19:56:29 UTC

    Thank you. This is very cool and easy to use.

  19. Lloyd Sun, 10 Oct 2010 21:15:09 UTC

    Glad it helped you guys :)

  20. John Tue, 28 Dec 2010 08:02:36 UTC

    Thanks ! Very easy to use.

  21. Katie Tue, 04 Jan 2011 04:34:43 UTC

    I can get this to work on Firefox. But I’m not able to reproduce it with Safari 4.1… though it’s working perfectly on this page right now!

    You must’ve done something different on this page, or am I missing something?

  22. Lloyd Tue, 04 Jan 2011 11:51:26 UTC

    Hi Katie,
    Sorry if it doesn’t work the first time, do you have a public link that I can look at? I’ll check it out. I remember checking in Safari 5.0.3 which is for windows with the same snippet that is posted here so I’m not sure what is the issue with 4.1. But still, I want to know so I can help you out :)

  23. Raphael Wed, 23 Feb 2011 05:15:16 UTC

    Código simples e perfeito.
    Muito obrigado.

    São Paulo – Brasil

  24. jen Mon, 14 Mar 2011 01:31:49 UTC

    Thanks a lot for perfect code!
    I blowed it up a bit :)
    First, I used classical scheme with link and anchor to make option work with JavaScript disabled.
    Second, I’ve changed the behaviour of interactive element with jQuery and CSS
    To much code to place it here, but those who interested can find it here:
    jenweb.info/page/go-to-top-jquery
    Article is alright with the link to source.
    It’s in Russian but code is international :)

  25. jen Mon, 14 Mar 2011 09:54:40 UTC

    P.S. Opera fix added
    I’ve found it at DinamicDrive http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm

  26. jen Mon, 14 Mar 2011 09:56:43 UTC

    Ah, sorry, DynamicDrive surely

  27. Lloyd Mon, 14 Mar 2011 18:51:51 UTC

    Hi jen!

    Very nice work, I like it :) I honestly didn’t consider my code to work if javascript is disabled so I think your code kicks ass, great job ;)

  28. Pete Mon, 18 Apr 2011 22:15:13 UTC

    I found your code on this site http://www.memsic.com/products/sensor-components/accelerometers.html

    Was just looking and was like mmmm I’ve seen this before.

  29. Lloyd Tue, 19 Apr 2011 09:21:38 UTC

    That’s interesting XD
    Looking at the code it looks pretty similar with mine but there seem to be a little difference the way “attr” property is used or something. Nice find Pete! ^^

  30. vijayakant Fri, 06 May 2011 15:02:37 UTC

    wow!!! really nice and easy to implement, ‘thank you very much’…

  31. miuza Wed, 11 May 2011 09:19:23 UTC

    nice

  32. Danny Sun, 29 May 2011 20:03:44 UTC

    Cheers mate. Works a treat. Simple and effective unlike some of the other codes i’ve seen on the internet.

  33. a?va otelleri Sun, 05 Jun 2011 05:41:03 UTC

    Very easy to use. Thanks.

  34. Ravi Wed, 14 Sep 2011 14:46:10 UTC

    Thank you very much :)

  35. Arun Fri, 16 Sep 2011 13:03:45 UTC

    Very easy to use.

    Thanks. (:-

  36. Wiki Blogger Wed, 05 Oct 2011 18:55:53 UTC

    Thanks for sharing, I will apply to the website.

  37. Profruit Sun, 09 Oct 2011 06:35:23 UTC

    There is a little problem. If turn javascript off, ‘Back to top’ stops to work. Have to thing about it.

  38. rahul Thu, 20 Oct 2011 16:38:02 UTC

    thanks man i was looking for this very eagarly.

  39. Camera_lucida Sat, 29 Oct 2011 22:33:36 UTC

    Simple turn around: add this at the bottom of your page. It will not appear if javascript is activated. Of course, it will not scrool smoothly, but it will sure work.

    [code]^ Retour[/code]

  40. Camera_lucida Sat, 29 Oct 2011 22:39:06 UTC

    @Profruit (i forgot to specify)

    Sorry, WP does not show JavaScript with [code].

    So here it is again:

    (noscript) (a href="#") ^ Retour(/a)(/noscript)

    - Change ( and ) for HTML brackets.

    Thanks Lloyd for the script!


^ Back to Top