A “back to top” button is a useful feature for a website because it allows users to easily navigate to the top of the page without having to scroll manually.
This can be especially helpful on long pages with a lot of content, as it can save users a significant amount of time and effort.
This post will take you through on how to create a floating back to top button with jQuery.
jQuery simplifies the process of working with JavaScript and allows developers to easily select, manipulate, and traverse the HTML elements on a page.
Create Floating Back to Top Button with jQuery
There are two main approaches that you can use to create a floating back to top button with jQuery.
- Using window.scrollTo(): This is a Javascript method used to scroll to a particular location on the web page programmatically. It takes two arguments – the x-coordinate and y-coordinate.
- Using scrollTop(): This is a jQuery method used to get or set the scroll position of an element.
This post will show you how to create a floating back to top button in jQuery using the two approaches listed above.
Before we get started with these two methods, there are a couple of basic steps that need to be done.
So without further ado, let’s dive right into it.
Setup Your Text Editor
There are several ways to write and run HTML, CSS, and jQuery code. For this particular post, we will use VS Code.
Create three files inside your project directory as follows:
- Index.html
- Index.css
- Index.js
You will write the jQuery code in the index.js file. Feel free to check out our post on [Link to the post] How to add jQuery to HTML to learn of the different ways of incorporating jQuery in HTML.
Write the HTML and CSS Code
First, create a button with the class name “back-to-top” and an “onclick” event set to scrollToTop(). When this button is clicked, it will execute the scrollToTop() function inside our jQuery.
Inside this button, pass the “up arrow” icon from the font awesome icon library and give it a class name of “up-arrow-icon.”
Tip: We have imported the jQuery and Font Awesome icons from a CDN inside the <head> tags together with the “index.css” file.
The code snippet below shows our HTML code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <script src="https://code.jquery.com/jquery-3.6.3.js"></script> <link rel="stylesheet" href="index.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <!-- Create the Back to Top Button --> <button class="back-to-top" onclick="scrollToTop()"> <i class="fa fa-arrow-up up-arrow-icon" aria-hidden="true"></i> </button> <!-- --> <script src="index.js"></script> </body> </html> |
Note: Don’t place the “back to top button” element inside a HTML element that has a set position value (e.g fixed or absolute) on the web page.
Next, style the button as shown in the CSS code below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.up-arrow-icon { color: white; font-size: 40px; font-weight: bold; padding: 2px; } .back-to-top { display: none; background-color: #27ae61; border: none; border-radius: 50px; position: fixed; right: 20px; bottom: 20px; z-index: 999; } .back-to-top:hover{ cursor: pointer; } |
- .up-arrow-icon: This class sets the text color to white, font size to 40 pixels, font weight to bold, and padding to 2 pixels.
- .back-to-top: This class sets the display property to ‘none’, which means that elements with this class will not be visible on the page by default. That will enable you to manipulate the visibility of the button using jquery.
It also sets a background color of #27ae61, removes any border, rounds the border corners to 50 pixels, sets the position of the element to fixed, aligns the element 20 pixels from the right and bottom edges of the viewport, and sets a high z-index of 999 to ensure the element is on top of all other elements.
- .back-to-top:hover: This class is applied to the “.back-to-top class” when the user hovers over the element. It changes the cursor when hovering to pointer shape.
Up to this point, you have all the HTML and CSS code ready. Let’s dive into the jQuery bit.
1. Create Floating Back to Top Button Using the window.scrollTo() Method
The window.scrollTo() is a JavaScript method that allows you to scroll an HTML document programmatically. It is typically used in conjunction with the jQuery library.
The basic syntax for using scrollTo() is:
|
1 |
window.scrollTo(x-coord, y-coord); |
The x-coord and y-coord arguments specify the coordinates of the point on the page that you want the viewport to be scrolled to.
Write the jQuery code below In your “index.js” file.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var pageAmountScrolled = 300; $(window).scroll(function () { if ($(window).scrollTop() > pageAmountScrolled) { $(".back-to-top").fadeIn(1000); } else { $(".back-to-top").fadeOut(1000); } }); function scrollToTop() { window.scrollTo(0, 0); } |
Let’s have a detailed look at the jQuery code above.
When the amount of pixels that the user has scrolled down is greater than the “pageAmountScrolled” variable (which is set to 300), the button with the class “back-to-top” will fade in over a duration of 1000 milliseconds (1 second).
If the user scrolls back up and the amount of pixels scrolled is less than “pageAmountScrolled,” the button will fade out over a duration of 1000 milliseconds.
When the function “scrollToTop” is called, the code will use the built-in “scrollTo” method to scroll the window back up to the top of the page (coordinates x=0, y=0).
The button has a class “back-to-top” that is being targeted by this script and on click event of this button it calls scrollToTop().
2. Create Floating Back to Top Button Using scrollTop() in jQuery
The scrollTop() function in jQuery is used to get the current vertical position of the scroll bar for the first element in the set of matched elements, or set the vertical position of the scroll bar for every matched element.
Write the jQuery code below in your “index.js” file.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var pageAmountScrolled = 300; $(window).scroll(function () { if ($(window).scrollTop() > amountScrolled) { $(".back-to-top").fadeIn(1000); } else { $(".back-to-top").fadeOut(1000); } }); function scrollToTop() { $(window).scrollTop(0); } |
Similar to Method 1, there is a “pageAmountScrolled” variable that checks the amount of pixels a user has scrolled from the top.
There is also a conditional statement that hides/ reveals the “back-to-top” button depending on the amount of pixels scrolled.
However, instead of using the window.scrollTo() method, we are calling the window.scrollTop() jQuery function.
- $(window).scrollTop(0) : It targets the “window” object, which represents the current web page, and calls the scrollTop method on it. The argument passed to the scrollTop method, 0, sets the scroll position to the top of the page.
How do I make the “back to top” button appear only when the user scrolls down the page?
You can use the jQuery animate function to smoothly scroll the page back to the top when the button is clicked. For example:
|
1 2 3 4 5 6 7 |
$(window).scroll(function() { if ($(this).scrollTop() > 50) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); |
How do I make the “back to top” button smoothly scroll the page back to the top when clicked?
You can use the jQuery animate function to smoothly scroll the page back to the top when the button is clicked. For example:
|
1 2 3 4 5 6 |
$('#back-to-top').click(function() { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); |
This will animate the page to top with 800ms.