Bootstrap Back to Top Button — Free HTML CSS JS Snippet

A back-to-top button only feels right if it stays invisible until it's actually useful, and this snippet implements that with a CSS transition plus a single scroll-position check rather than showing the button unconditionally from page load. The button itself is a real Bootstrap btn btn-dark rounded-circle, and its shown/hidden state is controlled entirely by one class, .bbtt-visible, toggled in JavaScript — the CSS handles the actual fade, transitioning both opacity and visibility over 0.25s. Both properties matter together: opacity alone would leave an invisible-but-still-clickable button sitting over the page content when hidden, while visibility alone would make the fade feel like an abrupt cut instead of a smooth fade, so animating both at once gets a real fade that also removes the button from interaction when it is not shown.

handleScroll() is the only logic driving visibility: it reads scrollArea.scrollTop and compares it against a named SHOW_THRESHOLD constant (300, matching the standard 300px convention used across most real-world implementations of this pattern), adding .bbtt-visible past the threshold and removing it otherwise. That function runs on every scroll event and once immediately on load — the immediate call matters as an edge case: without it, a page that loads already scrolled down (for example, returning via browser back/forward navigation with scroll position restored) would show no button at all until the very next scroll event fired, leaving the button incorrectly hidden despite already being past the threshold.

Clicking the button calls scrollArea.scrollTo({ top: 0, behavior: 'smooth' }) — the object-argument form of scrollTo, which is what enables the native smooth-scroll animation, as opposed to the older scrollTo(x, y) signature which jumps instantly with no animation at all. In this snippet the button scrolls a specific scrollable container (#bbttScrollArea, built with overflow-y: auto to keep the demo self-contained on the page), but the identical call against window (window.scrollTo({ top: 0, behavior: 'smooth' })) is exactly how you would wire this to a normal full-page scroll, which the snippet's title and aiPrompt spec around.

The button is positioned with position: sticky combined with a float: right container trick so it stays pinned to the bottom-right corner of the scrollable demo area as you scroll within it, without requiring JavaScript to reposition it on every scroll tick — only the show/hide class is computed in JS, keeping the scroll handler cheap enough to run on every single scroll event with no debouncing needed.

Because the entire behavior is two small event listeners over one boolean-like class and one constant, it ports directly into a React useEffect with a useState boolean for visibility, a Vue ref, or an Angular property bound to a class — with the scroll listener attached to window or a specific container ref and removed in the corresponding cleanup function to avoid a memory leak on unmount.