Back to Top Button Display

CHROMATIC-SYSTEM v1.03_BACK_TO_TOP_BUTTON_DISPLAY_ENGINE

INFORMATION & CODE

Back to Top Button

What the Code Does

This code provides a complete, responsive webpage template featuring a functional "Scroll to Top" button.

How the Code Works

The HTML structure sets up the foundational elements of the page, including a designated "Top" button element, a header, and a substantial amount of placeholder text (Lorem Ipsum) to ensure the page is long enough to require scrolling. The accompanying CSS styles the layout with a centered content container, responsive media queries that adjust widths and padding for smaller screens (under 600px wide), and positions the scroll button as a fixed, styled element in the bottom-right corner of the viewport while including hover effects.

The JavaScript brings the component to life by monitoring the user's scroll position on the window. It hides the "Top" button by default and only reveals it (display: "block") once the user has scrolled down more than 350 pixels from the top of the page; otherwise, it keeps the button hidden. Additionally, the script adds a click event listener to the button so that whenever a user clicks it, the browser smoothly or instantly resets the vertical scroll position of both the document body and element back to 0.

How to Use the Code

To use this code, save the HTML markup into an index.html file, place the CSS rules into a linked stylesheet named styles.css, and either embed the JavaScript inside a <script> tag at the bottom of the HTML document or save it in a separate file linked to the page. Once opened in any web browser, simply scroll down the long text until the red "Top" button appears in the bottom-right corner, and click it to jump back to the top of the page.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Back To The Top Display</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="page">
      <button class="top_btn" title="Go to top">Top</button>

      <div class="top_header"><h2>Scroll Down</h2></div>
      <div class="top_page">
        <p>This example demonstrates how to create a "scroll to top" button
          that becomes visible <strong>when the user starts to scroll the page</strong>.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          rure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
          deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et
          eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur
          eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
          molestiae voluptatibus.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
          nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula
          venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
          Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare
          eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus
          congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero
          sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida
          venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh
          tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet,
          consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
          lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
        </p>
        <p>Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
          vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis
          in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc
          sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
          venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida
          venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh
          tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit
          amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
          nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas
          nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum
          augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
        </p>
        <p>Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc
          sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed
          nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus
          gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus
          pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
          imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae
          scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec
          congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
          Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
          convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis
          dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
          venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida
          venenatis.
        </p>
        <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et
          eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur
          eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
          molestiae voluptatibus.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
          nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula
          venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
          Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare
          eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus
          congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero
          sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida
          venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh
          tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet,
          consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
          lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
        </p>
        <p>Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
          vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis
          in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc
          sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
          venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida
          venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh
          tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit
          amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
          nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas
          nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum
          augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
        </p>
        <p>Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc
          sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed
          nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus
          gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus
          pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
          imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae
          scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec
          congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
          Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
          convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis
          dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
          venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida
          venenatis.
        </p>
      </div>
    </div>
    <script src="scripts.js"></scripts>
  </body>
</html>

CSS


                      body {
        width: 100%;
        height: 100vh;
        padding: 10px;
        margin: 0;
        background: #ffffcc;
      }
      .top_header {
        width: 50%;
        margin: 10px auto 0 auto;
        padding:30px;
        background-color:#aaaaaa;
        color:white;
        transition-duration: 1s;
      }
    @media(max-width: 600px) {
      .top_header {
        width: 80%;
        margin: 10px 0 0 0;
      }
    }
      .top_page {
        width: 50%;
        margin: auto;
        background-color:#eeeeee;
        padding: 30px 30px 50px;
        text-align: justify;
        transition-duration: 1s;
      }
    @media(max-width: 600px) {
      .top_page {
        width: 80%;
        margin: 0;
        font-size: 16px;
      }
    }
      .top_btn {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 99;
        font-size: 18px;
        border: none;
        outline: none;
        background-color: red;
        color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 4px;
      }
    @media(max-width: 600px) {
      .top_btn {
        padding: 5px;
        font-size: 14px;
      }
    }
      .top_btn:hover {
        background-color: #0f0;
      }

JAVASCRIPT


                      const totop = document.querySelector(".top_btn");
      

      window.onscroll = function() {
        if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
          totop.style.display = "block";
        } else {
          totop.style.display = "none";
        }
      }

      totop.onclick = function() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      }

PREVIEW

Scroll Down

This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.

Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.

MENU

INFORMATION & CODE