Scroll to top button jQuery

A "scroll-to-top" button is used to return your view to the top of the page easily. This little UX feature is very common in modern websites. It's particularly helpfulfor web pagesthathave a lot of content, like single-page applications.

In this article, you'll learn how to create a scroll-to-top button using JavaScript and jQuery.

How to Create a Scroll-to-Top Button Using JavaScript

Here, a basic structure of the webpage is created with dummy data. You only need to focus on the scroll-to-top button.

The scroll-to-top button points to the top of the page using the #top id. #top is the id of the tag. The icon of the scroll-to-top button is created using font awesome.

JavaScript Code

// ===== Scroll to Top ====
const scrollTop = document.getElementById['scrolltop']
// When the page is loaded, hide the scroll-to-top button
window.onload = [] => {
scrollTop.style.visibility = "hidden";
scrollTop.style.opacity = 0;
}
// If the page is scrolled more than 200px,
// display the scroll-to-top button
// Otherwise keep the button hidden
window.onscroll = [] => {
if [window.scrollY > 200] {
scrollTop.style.visibility = "visible";
scrollTop.style.opacity = 1;
} else {
scrollTop.style.visibility = "hidden";
scrollTop.style.opacity = 0;
}
};

The scroll-to-top button is displayed and hidden according to the following conditions:

• When the page is loaded, the scroll-to-top button is hidden.
• The scroll-to-top button is kept hidden until the page is scrolled 200 pixels. You can change the pixels as per your requirement.

CSS Code

Related:How to Use CSS box-shadow: Tricks and Examples

html {
scroll-behavior: smooth;
}
#scrolltop {
display: block;
visibility: visible;
opacity: 1;
transition: visibility 0s, opacity 0.5s ease-in;
position: fixed;
bottom: 20px;
right: 20px;
background: rgba[255, 255, 255, 0.4];
border-radius: 20%;
}
.top-button {
text-decoration: none;
cursor: pointer;
padding: 30px;
color: #222;
}
body {
background: linear-gradient[180deg, #0697f9 0%, #f898bf 100%];
color: #fff;
font-family: 'Quicksand', sans-serif;
font-size: 24px;
line-height: 1.4;
text-align: center;
padding: 40px;
}
.long-text {
max-width: 700px;
margin: 0 auto;
padding: 40px;
background: rgba[0, 0, 0, 0.2];
}

The above CSS is used to style the scroll-to-top button and the web page. You can play with the CSS and style the button according to your requirement.

How to Create a Scroll-to-Top Button Using jQuery

You can add a scroll-to-top button to your website using the following code snippet:

HTML Code

Back to top button using jQuery

Here, a basic structure of the webpage is created with dummy data. You only need to focus on the scroll-to-top button.

When this button is clicked, the page is scrolled to the top. This will be functional after adding the jQuery code.

jQuery Code

Related:Learn How to Create an Element in jQuery

// ===== Scroll to Top ====
var btn = $['#button'];
// If the page is scrolled more than 300px,
// show the scroll-to-top button
// Otherwise hide the button
$[window].scroll[function[] {
if [$[window].scrollTop[] > 300] {
btn.addClass['show'];
} else {
btn.removeClass['show'];
}
}];
btn.on['click', function[e] {
e.preventDefault[];
$['html, body'].animate[{scrollTop:0}, '300'];
}];

Here, theshow class is added to the button element if the user scrolls more than 300 pixels on the web page. This show class makes the button element visible. By default, the visibility of the button element is kept hidden. More details about the button are in the following CSS code.

CSS Code

Related:Simple CSS Code Examples You Can Learn in 10 Minutes

#button {
display: inline-block;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s,
opacity .5s, visibility .5s;
opacity: 0;
visibility: hidden;
z-index: 1000;
}
#button::after {
content: "\f077";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
#button:hover {
cursor: pointer;
background-color: #333;
}
#button:active {
background-color: #555;
}
#button.show {
opacity: 1;
visibility: visible;
}
/* Styles for the content section */
.content {
width: 77%;
margin: 50px auto;
font-family: 'Merriweather', serif;
font-size: 17px;
color: #6c767a;
line-height: 1.9;
}
@media [min-width: 500px] {
.content {
width: 43%;
}
#button {
margin: 30px;
}
}
.content h2 {
margin-bottom: -10px;
color: #03a9f4;
line-height: 1.5;
}
.content h3 {
font-style: italic;
color: #96a2a7;
}

The above CSS is used to style the scroll-to-top button and the web page. You can play with the CSS code and style the button according to your requirements.

Now you have a fully functional scroll-to-top / back-to-top button. If you want to have a look at the complete source code used in this article, here's the GitHub repository of the same.

Note: The code used in this article is MIT Licensed.

Learn More About User Experience

User experience focuses on whether a product meets the needs of its users. If you're a designer or a developer,you'd do well to follow UX design principlesand create awesome products. If this field interest's you, you must follow the correct path to get started.