Open In App

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

Last Updated : 10 Oct, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Scrolling to the top of a long webpage can be tedious, especially when you're at the bottom. A "Scroll to Top" button can improve user experience by allowing quick navigation back to the top with a single click, saving time and effort. This is particularly useful for mobile users who might otherwise need to swipe multiple times to reach the top.

Preview Image:

topscroll-(1)

What Does a "Scroll to Top" Button Do?

  • The button is initially hidden and only becomes visible when the user scrolls down the page.
  • Clicking the button scrolls the page back to the top.
  • It enhances the user experience on websites with lengthy content.

Approach to Adding a "Scroll to Top" Button

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'.

How it Works

  • Scroll Event Listener: The JavaScript file adds an event listener that checks if the user has scrolled down more than 20 pixels. If so, the "Scroll to Top" button is displayed; otherwise, it remains hidden.
  • Scroll to Top Function: When the button is clicked, the scrollToTop function smoothly scrolls the page back to the top.


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(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');

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:



S

shivanigupta18rk
Improve
Article Tags :

Explore

Lightbox