Back to Top button that follows mouse X

Scroll down a bit, move your mouse horizontally, and click the floating button to smoothly scroll to the top.

How it works

  1. Fixed bottom: CSS keeps the button stuck to the bottom via position: fixed; bottom: 18px;.
  2. Follow mouse X: JS listens to mousemove and sets style.left to track the cursor, clamped inside the viewport.
  3. Appear on scroll: When you scroll past 300px, the button gets a .show class to fade in.
  4. Smooth scroll to top: Clicking the button runs window.scrollTo({ top: 0, behavior: 'smooth' }).

Demo content

Below is spacer content to enable scrolling.

End of content. Try the button!