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 helpful for web pages that have 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

scroll to top button using javascript

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

HTML Code

        <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
 <meta charset="utf-8">
 <title>Scroll-to-Top button using JavaScript</title>
 <link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
 <!-- BUTTON NEEDS FONT AWESOME FOR CHEVRON UP ICON, YOU CAN USE LATEST VERSION FOR MORE ICONS -->
 <!-- https://www.bootstrapcdn.com/fontawesome/ -->
 <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 <link rel="stylesheet" href="styles.css">
</head>

<body id="top">
 <h1>
 Scroll To Top
 </h1>
 <div class="long-text">
 <p>Scroll down to see the button.</p>
 <p>Click the button to see smooth scroll to top.</p>

 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.



 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.



 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.



 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.



 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.


 </div>
 <div id="scrolltop">
 <a class="top-button" href="#top"><i class="icon-chevron-up"></i></a>
 </div>
 <script type="text/javascript" src="script.js"></script>
</body>

</html>

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

        <div id="scrolltop">
 <a class="top-button" href="#top"><i class="icon-chevron-up"></i></a>
</div>

The scroll-to-top button points to the top of the page using the #top id. #top is the id of the <body> 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

scroll to top button using jquery

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

HTML Code

        <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
 <meta charset="utf-8">
 <title>Back to top button using jQuery</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 <link href="https://fonts.googleapis.com/css?family=Merriweather:400,900,900i" rel="stylesheet">
 <link rel="stylesheet" href="styles.css">
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
 <!-- Back to top button -->
 <a id="button"></a>


 <!-- Some content to fill up the page -->
 <div class="content">
 <h1>Back to Top Button</h1>
 <h3>Scroll down the page</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
 </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
 </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
 </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
 </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
 </p>
 </div>
 <script type="text/javascript" src="script.js"></script>
</body>

</html>

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

        <a id="button"></a>
    

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, the show 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 h1 {
 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 principles and create awesome products. If this field interest's you, you must follow the correct path to get started.