Disappearing “Scroll to top” link with jQuery and CSS

Posted October 6, 2009 by Brian Cray

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>
<!-- put all of your normal <body> stuff here -->
<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

About the author

Brian Cray is a Columbus, Ohio-based web entrepreneur & consultant. View some of Brian’s work in his portfolio and learn how to make kick ass websites by reading his blog.

Brian Cray: Measurement-driven, user-focused web entrepreneur & consultant