How to make a scroll to top button using jQuery
One of the key aspects of a good user experience on a website is the ease of navigation. Among the many ways of improving a website's navigation is adding a "scroll to top" button.
What is a Scroll to Top Button?
A scroll-to-top button is a small button that is usually positioned at the bottom right or left corner of a webpage which when clicked returns the user back to the top of the page.
In most cases, it's hidden by default and only appears when the user scrolls down to some extent of the page. You can scroll down this page to see one at the bottom right corner.
It is especially useful for websites with a lot of content, such as blogs, news websites, and e-commerce websites. It's a quick and easier alternative to having to manually scroll all the way back up after scrolling down through a long page.
In this article, you will learn how to make and implement a scroll-to-top button using jQuery
How Does a Scroll to Top Button Work?
A scroll-to-top button is in most cases hidden by default and uses JavaScript to detect when the user has scrolled down a certain extent of the page in order to appear.
When the user clicks on the button, it uses JavaScript to scroll the page back up to the top. This can be achieved using jQuery.
Implementing a Scroll to Top Button Using jQuery
Follow the steps below to implement a scroll-to-top button using jQuery on your webpage:
Step 1: Include the jQuery library
Include the jQuery library in your HTML file. You can download the latest version of jQuery from the jQuery website, or you can use a CDN (eg Google, cdnjs, jsdelivr, etc) to link to the jQuery library directly from your HTML file.
You can include it in the <head> tag or before the closing </body> tag.
....
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</body>
</html>
Step 2: Create an HTML button element for the scroll-to-top button
Next, we create the scroll-to-top button using the HTML button element.
<button id="scroll-to-top">Top</button>
The above code creates a button with the text "Top". You can as well use an icon instead of text using Font Awesome, Bootstrap glyphicons, or other icon libraries.
Then style and position the button in the bottom right (or left) corner of the page using CSS.
#scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
padding: 10px;
border: none;
border-radius: 50%;
background-color: #217a31;
color: #fff;
cursor: pointer;
}
#scroll-to-top:hover {
background-color: #76a003;
}
In this CSS code, we have styled the button to be round in shape, green background, and white text, and set the background to change to a different shade of green on hovering the mouse over it. We have also positioned the button in the bottom right corner of the screen and hidden it from displaying.
Step 2: Add the jQuery code to show, hide, and activate the button
The jQuery code below detects when the page is being scrolled and checks whether the user has scrolled more than 500 pixels down the page. If they have, the scroll-to-top button is displayed by calling the fadeIn() function on the button. If they haven't, the fadeOut() function is called. The purpose of calling the fadeOut() function is to hide the button on scrolling up back to less than 500px.
$(window).scroll(function () {
if ($(this).scrollTop() > 500) {
$('#scroll-to-top').fadeIn();
} else {
$('#scroll-to-top').fadeOut();
}
});
You can replace 500 in this example with any height on the page where you want to show or hide the scroll-to-top button.
Next, add the jQuery code to scroll the page back up to the top when the user clicks on the button.
The click() function listens for a click on the scroll-to-top button. When the button is clicked, the animate() function is called on the html and body elements, which smoothly scrolls the page back to the top.
$('#scroll-to-top').click(function () {
$('html, body').animate({ scrollTop: 0 }, 500);
});
The 500 in the animate() function above sets the scroll to top speed to 500 milliseconds on clicking the button. You can speed up the scroll by reducing the value or altogether omitting it. You can also slow down the scroll speed further by increasing the number or replacing it with the string 'slow' as below:
$('#scroll-to-top').click(function () {
$('html, body').animate({ scrollTop: 0 }, 'slow');
});
With the above code, you now have your scroll-to-top button styled, positioned, and working. Let's now combine the HTML, CSS, and jQuery code into one file.
<!DOCTYPE html>
<html>
<head>
<title>Scroll to Top Button</title>
<style>
#scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 17px;
padding: 10px;
border: none;
border-radius: 50%;
background-color: #217a31;
color: #fff;
cursor: pointer;
display: none;
}
#scroll-to-top:hover {
background-color: #76a003;
}
</style>
</head>
<body>
<section>
<!-- Add your webpage content here -->
</section>
<button id="scroll-to-top">Top</button>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(function() {
$(window).scroll(function () {
if ($(this).scrollTop() > 500) {
$('#scroll-to-top').fadeIn();
} else {
$('#scroll-to-top').fadeOut();
}
});
$('#scroll-to-top').click(function () {
$('html, body').animate({ scrollTop: 0 }, 500);
});
});
</script>
</body>
</html>
We have enclosed all our jQuery code within $(function() {}) to wait for the document to be fully loaded before running the jQuery code.
You can add content in the above code to make the page longer in order to see the button effect.
Customize the look and feel of the scroll-to-top button to your own liking. This could be changing the button text to an icon, the colors, shape, how far on scrolling the button should appear or hide, and how fast or slow the scroll animation should be.
That's it! You are now good to go, all the best in your coding.
