Page layouts Free

Back-to-top button

A floating button that appears after scrolling and smoothly returns the user to the top of the page.

↑

var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'back-to-top';
btn.setAttribute('aria-label', 'Back to top');
btn.textContent = '↑';
document.body.appendChild(btn);
window.addEventListener('scroll', function () {
  btn.classList.toggle('is-visible', window.scrollY > 400);
});
btn.addEventListener('click', function () {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

/* CSS */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 50;
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

This creates a floating round button that fades in once the user scrolls past 400px and scrolls smoothly back to the top on click. Add the JS via an HTML widget or footer include, and paste the CSS block into Custom CSS.

Notes

The snippet has two parts: run the JS once per page, and put the rules under /* CSS */ in your stylesheet.
The button carries an aria-label so screen readers announce it.
Adjust the 400px threshold to change how soon it appears.