Open In App

How to create a Scroll Back to Top button using CSS ?

Last Updated : 18 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Scrolling the webpage can be a tedious task especially when you are somewhere at the bottom of the page & the length is too long to again reach the top of the webpage. The user may sometimes escape to visit the page. For this, adding a scroll-back button can help to reach the initial position of the page.

Here, the button is initially hidden and becomes visible when the user scrolls down, offering the feature to quickly scroll back to the top of the page. Websites with lengthy text or pages often include a “Scroll to Top” button to enhance user experience by saving time and effort in scrolling back to the beginning.

Preview

topscroll

Approach

The approach briefly illustrates the “Scroll Back to Top” button, primarily used for mobile devices where scrolling to the top might involve multiple swipes. It provides a one-tap solution for users, enhancing the overall mobile user experience.

  • Make separate HTML, CSS, and JavaScript files. Then, integrate the external stylesheet and JavaScript file into the HTML document.
  • The element <h1> defines the heading having CSS property (color: green). Set the property (color: green;) and (color: blueviolet;) to the element <h3>.
  • For adding a scroll event listener to the window, the window.addEventListener(‘scroll’, function () {…}); is defined.
  • Inside the event listener, Check if the vertical scroll position of the body (document.body.scrollTop) or the document’s root element (document.documentElement.scrollTop) is greater than 20 pixels.
  • If true, set the display style of the “Scroll to Top” button to ‘block’; otherwise, set it to ‘none’.

Example: Creating a “scroll back to top” button using CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Scroll to Top</title>
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>
        How to create a "scroll back to top"
        button using CSS.
    </h3>
    <p>
        Linear data structure: Data structure
        in which data elements are arranged
        sequentially or linearly, where each
        element is attached to its previous
        and next adjacent elements, is called
        a linear data structure. Examples of
        linear data structures are array, stack,
        queue, linked list, etc. Static data
        structure: Static data structure has
        a fixed memory size. It is easier to
        access the elements in a static data
        structure. An example of this data
        structure is an array. Dynamic data
        structure: In dynamic data structure,
        the size is not fixed. It can be randomly
        updated during the runtime which may
        be considered efficient concerning the
        memory (space) complexity of the code.
    </p>
  
    <a href="#" 
       class="scrollbutton" 
       id="scrollbuttonid">
        Scroll to Top
    </a>
  
    <script src="script.js"></script>
</body>
  
</html>


CSS




/* style.css */
@import url(
  
body {
    height: 200vh;
    background-color: rgb(200, 233, 200);
    font-family: 'Poppins', sans-serif;
}
  
h1 {
    color: green;
    text-align: center;
}
  
h3 {
    color: blueviolet;
    text-align: center;
}
  
p {
    text-align: justify;
    font-size: 30px;
}
  
.scrollbutton {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 40%;
    background-color: #1b5490;
    color: #e8e8e8;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 20px;
}
  
.scrollbutton:hover {
    background-color: #2d6418;
    color: white;
    font-size: 20px;
    padding: 20px;
}


Javascript




// script.js
let mysBtn = document
    .getElementById('scrollbuttonid');
  
window.addEventListener('scroll', function () {
    if (document.body.scrollTop > 20
        || document.documentElement.scrollTop > 20) {
        mysBtn.style.display = 'block';
    } else {
        mysBtn.style.display = 'none';
    }
});


Output:

topani



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads