Adding A jQuery "Scroll-To-Top" Button To A Webpage

Adding A jQuery “Scroll-To-Top” Button To A Webpage

by Mark-Anthony
in Blog Tutorials
posted December 15, 2013

When creating a website with lengthy content, such as a blog or e-commerce site, your users may end up having to scroll through your articles and product pages for some time. If your website does not have a fixed or sticky navigation, it can be frustrating for some users to have to scroll all the way back up to the top of your page to access your navigation menu. An alternate way that can help your users quickly go back to the top of the page and get to the navigation menu is to have a floating or fixed “scroll-to-top” or “back-to-top” button appear on the page when the user starts to scroll down your page.

In this tutorial, we will add a scroll-to-top button to a webpage using jQuery.

Try it!
View Demo

Let’s Begin!

1. The HTML
First, I created a single HTML document with a few sections to scroll through. I made the height of each section tall enough so that I can test the scroll button for the purpose of this tutorial.

<!DOCTYPE html>

<html lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
<title>Smooth Scrolling “Back-To-Top” Button</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style type=”text/css”>@import url(css/reset.css);</style>
</head>

<body>

<section id=”scroll-down”>
<h1>scroll down.</h1>
<img src=”images/scroll-down.png”>
</section>

</body>
</html>

2. Installing jQuery
After I set up the HTML, I will add jQuery to the page within the <head> of the document.

3. Creating The Button
Next, I will add a <div> for the “scroll-to-top” button that will go at the bottom of the page.

<div class=”scroll-to-top”>
</div>

4. Styling the Button
Before I add the jQuery, I will be styling and positioning the scroll-to-top button in my CSS. Within my CSS, I’ll be positioning the button to the bottom right-hand side of the browser. I’ve created a scroll-to-top icon in Illustrator with a slightly transparent background, for a subtle effect.

position: fixed;
background:url(images/scroll-to-top.png) no-repeat;
cursor: pointer;
width:55px;
height: 55px;
bottom: 1em;
padding-right: 1em;
display: none;
z-index: 999;
}

</style>

5. The jQuery
Lastly, I’ll add the jQuery function that will make the scroll work. The jQuery function is placed within the <head> of the document, before the closing </head> tag.

jQuery(document).ready(function() {
var offset = 200;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery(‘.scroll-to-top’).fadeIn(duration);
} else {
jQuery(‘.scroll-to-top’).fadeOut(duration);
}
});

jQuery(‘.scroll-to-top’).click(function(event) {
event.preventDefault();
jQuery(‘html, body’).animate({scrollTop: 0}, duration);
return false;
})
});

</script>
Within the function, I’ll first set the offset value. This determines how far the user will scroll before the scroll-to-top button appears at the bottom of the browser. The function also gets the current scroll position using scrollTop. If the current scroll position is greater than the offset value I’ve indicated, the scroll-to-top button will display and will also trigger the fadeIn function. If the scroll position is less than the offset, the button will not be visible and will then trigger the fadeOut function. Finally, to make the scroll-to-top button work, I’ll use the animate function when a click event is triggered.

Conclusion

So, there you have it. Using a “scroll-to-top” or “back-to-top” button is an easy way of getting your users/readers back to the top of a webpage without using a fixed navigation.

Try it!
View Demo

Get the code!
Download Source