How to implement Scroll to Top button on your website

Adding a Scroll-to-Top button is a simple yet effective way to enhance your website’s user experience - especially on long pages or blog articles. In this post, we’ll walk you through how to add a smooth, stylish scroll-to-top button using just HTML, CSS and JavaScript .

Demo

You’re seeing it on this page — just scroll down and the button will appear on the right side of the screen. Click it to smoothly return to the top of the page.

What Is a Scroll-to-Top Button?

A Scroll-to-Top button is a user interface element that allows visitors to quickly return to the top of a webpage. It’s typically represented as a small, floating icon (often an upward arrow) that only appears when the user scrolls down. When clicked, the page scrolls smoothly back to the top — improving navigation and user experience.

Add the HTML

To create a Scroll-to-Top button, you first need to add the HTML markup. Place this code snippet where you want the button to appear (typically at the end of your HTML document, just before the closing </body> tag):

  <a href="#" class="arrow-up">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"></path>
    </svg>
    <span>Back to<br>top</span>
  </a>

Style It with CSS

Add this CSS to your stylesheet to position and style the button

  a.arrow-up {
    position: fixed;
    right: 2px;
    bottom: calc(50vh - 25px); /* Center vertically */
    background: #cc0100;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-direction: column;
    text-decoration: none;
    color: #fff;
    z-index: 1000;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    & span {
      text-align: center;
      font-size: 10px;
      line-height: 12px;
    }
    &.show {
      opacity: 1;
      transform: translateY(0);
    }
  }

This makes the button float on the right side, vertically centered, and keeps it hidden until the user scrolls. Feel free to adjust the styles to match your website’s design.

Add the JavaScript

Use JavaScript to detect scrolling and toggle the button’s visibility.

  const backToTopBtn = document.querySelector('.arrow-up');

  window.addEventListener('scroll', () => {
    if (window.scrollY > 300) {
      backToTopBtn.classList.add('show');
    } else {
      backToTopBtn.classList.remove('show');
    }
  });

  backToTopBtn.addEventListener('click', function (event) {
    event.preventDefault();
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });

Bonus: jQuery Version

If you prefer using jQuery, here’s a quick version of the same functionality:

  $(document).ready(function() {
    $(window).scroll(function () {
      $('.arrow-up').toggleClass('show', $(this).scrollTop() > 300);
    });

    $('.arrow-up').click(function (e) {
      e.preventDefault();
      $('html, body').animate({ scrollTop: 0 }, 600);
    });
  });

Make sure jQuery is included in your site, eg

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Both scripts add the show class when the page is scrolled more than 300 pixels, making the button appear. When clicked, it scrolls the page smoothly to the top.

Conclusion

The scroll-to-top button may seem like a small detail, but it can make a big difference in user navigation — especially on content-heavy sites. It’s also a great example of how simple enhancements can improve accessibility and user flow.

Back to
top