Scroll to Top Button with JavaScript — Simple Scroll Behavior Example

Introduction

Scroll to Top Button with JavaScript is a small yet powerful UI feature. It helps users quickly navigate back to the top of your page without scrolling manually. This snippet shows how to implement it with smooth behavior.

How to Create a Scroll to Top Button with JavaScript

Here’s a simple function and button setup to scroll smoothly to the top of the page:

<button onclick="scrollToTop()">Scroll to Top</button>

<script>
function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}
</script>

How This Works

The Scroll to Top Button with JavaScript example uses window.scrollTo() with behavior: 'smooth' to create a clean user experience for returning to the top of the page.

Why Use This?

Scroll to Top Button with JavaScript improves user navigation on long pages and helps reduce friction for mobile users.

Common Mistake

Forgetting to add behavior: 'smooth' will cause the scroll to jump instantly, which looks unpolished.

Pro Tip

Combine this with scroll-triggered visibility for better UX — show the button only after the user scrolls down a bit.

Related Snippet

Detect if Element is in Viewport with JavaScript