Disappearing “Scroll to top” link with jQuery and CSS

Reading time: About 1 minute

Seen in many forms, such as “Back to top,” “Top of page,” or “Scroll to top,” these links provide a way for users to jump to the top of the page, back to navigation and other handy stuff.

This tutorial will help you build a scroll to top link, or whatever you call it, that appears when the user scrolls down, and disappears when users reach the top of the page using a combination of CSS and jQuery (a free javascript framework). You’ll need to download jQuery if you aren’t using it already.

Demo

You can either view the demo source if you’re an advanced developer, or read on and I’ll go through the CSS, jQuery, and HTML code separately below.

The HTML (inside the <body>)
<body>
<div id="top"></div>

<div id="message"><a href="top">Scroll to top</a></div>
</body>
The CSS
#message a
{
	/* display: block before hiding */
	display: block;
	display: none;
 
	/* link is above all other elements */
	z-index: 999; 
 
	/* link doesn't hide text behind it */
	opacity: .8;
 
	/* link stays at same place on page */
	position: fixed;
 
	/* link goes at the bottom of the page */
	top: 100%;
	margin-top: -80px; /* = height + preferred bottom margin */
 
	/* link is centered */
	left: 50%;
	margin-left: -160px; /* = half of width */
 
	/* round the corners (to your preference) */
	-moz-border-radius: 24px;
	-webkit-border-radius: 24px;
 
	/* make it big and easy to see (size, style to preferences) */
	width: 300px;
	line-height: 48px;
	height: 48px;
	padding: 10px;
	background-color: #000;
	font-size: 24px;
	text-align: center;
	color: #fff;
}
The jQuery
$(function () { // run this code on page load (AKA DOM load)
 
	/* set variables locally for increased performance */
	var scroll_timer;
	var displayed = false;
	var $message = $('#message a');
	var $window = $(window);
	var top = $(document.body).children(0).position().top;
 
	/* react to scroll event on window */
	$window.scroll(function () {
		window.clearTimeout(scroll_timer);
		scroll_timer = window.setTimeout(function () { // use a timer for performance
			if($window.scrollTop() <= top) // hide if at the top of the page
			{
				displayed = false;
				$message.fadeOut(500);
			}
			else if(displayed == false) // show if scrolling down
			{
				displayed = true;
				$message.stop(true, true).show().click(function () { $message.fadeOut(500); });
			}
		}, 100);
	});
});
Full source

To view the full source code together in one file, go to the demo and view the source code there.

Conclusion

You’re all done! Combine the HTML, CSS, and jQuery code together into one file, or separate them out into your existing external stylesheet and javascript files. Don’t forget to put your CSS inside the <head> element and your javascript (jQuery) right before the </body> tag, always.

See the end result

18 comments skip to comment form

Baba Nutboltoo said— 34 minutes later

http://davidwalsh.name/jquery-top-link – this one is far far better!!

#1
Brian Cray said— 43 minutes later

Thanks Baba, that’s certainly an alternative, though I don’t necessarily agree that it’s “far far better”

#2
Toby said— 7 hours later

Nicely done. My only “beef” is that while it allows access by a screen reader, the “back to top” link is not accessible for visitors without JavaScript. Why not display it, check for JavaScript, and then hide?

#3
Brian Cray said— 7 hours later

Toby: My concern with hiding it with javacript is the ugly flash before it’s hidden with javascript. I guess you could style it or add a class via javascript so it would otherwise be a non-descript “scroll to top” page….

#4
Jayaprakash said— 13 hours later

I feel that the placement of the “scroll to top” section may create readability issue for the user especially in a 100% width based layout. Also the width of the section is far higher than expected.

It would be better if you can place it not in the readable area.

#5
Mr.JOSE said— 17 hours later

Nice trick yar.. I would be implementing it on my new project… With some modification – a bit smaller and positioned right, so that its not on top of anything..

#6
iPad said— 1 day later

David Walsh alternative isn’t “far far better” that version don’t support IE+, this one don’t support IE6 but it works in IE7, IE8 which is extremely important. Thanks a lot for this Brian.

#7
Brian Cray said— 1 day later

Thanks iPad =) (and who cares about IE6 anyway? hehe)

#8
Brian J King said— 2 weeks later

Great & helpful post Brian – agree on the IE6 hate. Best IMHO would be to check for javascript in the browser, if not display the “scroll to top” link, if javascript is enabled then utilize the jQuery scroll to top box. Thoughts?

#9
Your name said— 1 month later

“Scroll to top” buttons! How quaint! It’s like we’re in 1998 again, thanks for the flashback.

#10
Brian Cray said— 1 month later

“Your name”: I’m leaving your comment published because it’s a great example of how the Internet lets people bury accountability under anonymity, which is a common and sometimes detrimental problem in web-based social platforms.

Everyone else: Keep the above comment in mind when you’re helping your organizations design social strategies.

#11
Charles said— 1 month later

Hello, Thank you much for sharing this!! I am very rusty on all of coding, unfamiliar with much of it, and this was exactly what I was looking for. My problem i that i use free webhosting and this provider adds banners at the top. When I click the “Scroll to top”, then I have to manually scroll further up to reactivate the script so that when I scroll down the “Scroll to top” displays. I hope this makes sense. The URL is at http://orani.100webspace.net/testindex.html

Thanks for reading, I appreciate the help.

#12
Montana Flynn said— 2 months later

Heres a link to my version, which supports IE6: http://blog.complimedia.com/added-bells-whistles-blog/

#13
Nikhil Sheth said— 2 months later

Hey. Nicely done. Just that need to give better placement/looks to the link which appears.

#14
Jitendra Vyas said— 2 months later

@Montana Flynn – it not works in IE6

#15
Todd said— 2 months later

Nicely done. I haven’t seen any examples posted here that are “far far better” than yours Brian. Just modified for those who feel they can make it *look” a little better. Aesthetic-wise, they’ve changed it but they have not necessarily “modified” it, that would involve programming to get technical.

Anyway, I like what you’ve done here and with your site overall. This is just another nice little jQuery tutorial to tinker with. Thanks, Brian!

#16
Chandeep Heera said— 3 months later

Nice work Brian, very impressed with the easy-to-follow steps and end result.

I was wondering if it’s possible to modify the CSS or jQuery in order to display navigation controls that appear side-by-side in the same fashion? So users can jump up or down to certain sections within particularly long pages. I’ve tried tweaking the code but the hover-links layer up on the same spot.

My eyes are starting to sting now after searching and sifting through page after page. Would really appreciate the help or a link to any relevant tutorials.

#17
JEnghy said— 9 months later

Many thanks for great work

#18
Respond to this post—

Your name

E-mail address will not be published