How To Create a Back to Top Button

Learn how to show a small button in the corner that takes the visitor back to the top of a long page.

Step 1: The HTML

One button is all you need. Put it just before the closing </body> tag.

Example

html

<button id="topBtn" aria-label="Back to top">&#8679;</button>

⇧ is an upward arrow symbol.

Step 2: The CSS

position: fixed keeps the button in the bottom-right corner while the page scrolls. It starts hidden, and the show class makes it appear.

Example

css

#topBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: #059669;
  color: white;
  font-size: 22px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
#topBtn.show { opacity: 1; pointer-events: auto; }

pointer-events: none stops the invisible button from catching clicks.

Step 3: The JavaScript

Two jobs: show the button when the page has scrolled more than 300 pixels, and scroll smoothly to the top when it is clicked.

Example

javascript

const topBtn = document.getElementById("topBtn");

window.addEventListener("scroll", function () {
  topBtn.classList.toggle("show", window.scrollY > 300);
});

topBtn.addEventListener("click", function () {
  window.scrollTo({ top: 0, behavior: "smooth" });
});

Code	Meaning
`"scroll"` event	Runs every time the page scrolls
`window.scrollY`	How many pixels the page has scrolled down
`scrollTo({ top: 0 })`	Goes back to the very top
`behavior: "smooth"`	Glides instead of jumping

The Complete Example

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.7; }
  .section { background: #f3f4f6; border-radius: 8px; padding: 16px; margin-bottom: 16px; height: 300px; }
  #topBtn { position: fixed; bottom: 20px; right: 20px; width: 48px; height: 48px; border: none; border-radius: 50%; background: #059669; color: white; font-size: 22px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.25); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
  #topBtn.show { opacity: 1; pointer-events: auto; }
  #status { position: fixed; top: 10px; right: 20px; background: white; padding: 4px 10px; border-radius: 6px; font-size: 14px; }
</style>
</head>
<body>

<h1>A Long Page</h1>
<p id="status">Scrolled: 0px</p>
<div class="section">Section 1: Scroll down slowly.</div>
<div class="section">Section 2: The button appears after 300 pixels.</div>
<div class="section">Section 3: Keep going.</div>
<div class="section">Section 4: Now click the round button.</div>

<button id="topBtn" aria-label="Back to top">&#8679;</button>

<script>
  const topBtn = document.getElementById("topBtn");
  const status = document.getElementById("status");
  window.addEventListener("scroll", function () {
    topBtn.classList.toggle("show", window.scrollY > 300);
    status.innerHTML = "Scrolled: " + Math.round(window.scrollY) + "px";
  });
  topBtn.addEventListener("click", function () {
    window.scrollTo({ top: 0, behavior: "smooth" });
  });
</script>

</body>
</html>

Try it Yourself »

Output

Scrolled: 0px      (at the top, button hidden)
Scrolled: 450px    (button visible in the corner)

A No-JavaScript Version

A plain link to the top of the page also works. Add scroll-behavior: smooth to make it glide:

Example

html

<style>html { scroll-behavior: smooth; }</style>
<a href="#">Back to top</a>

This link is always visible, which is fine at the bottom of a footer.

Keep the button small and in a corner so it never covers important content or other buttons, such as a WhatsApp chat icon.

Exercise

Which property tells you how far the page has been scrolled down?

window.heightwindow.scrollYdocument.topwindow.scrollTo