How to Add a Back-to-Top Button to Your Website in 2026

A back-to-top button is a small fixed control that appears once a visitor scrolls down the page, and clicking it carries them smoothly back to the top. The fastest way to add one is a real button element, positioned with CSS, revealed after a scroll threshold, and wired to a native smooth-scroll call.

You do not need a plugin or a heavy script library for this. A working version fits in a few lines of markup, style, and script, and it can be made fully accessible with a handful of extra attributes.

Start with a real button, not a styled div

Use an actual button element rather than a div or span dressed up to look clickable. Buttons are focusable by default, respond to the keyboard without extra work, and get announced correctly by screen readers. Give the button a visible label, or an aria-label if you are using an icon only, and set type=”button” so it never behaves like a form submit control.

• Markup: a button with an id such as back-to-top and an aria-label of “Back to top”.
• Place it once, near the end of the body, so it sits above the rest of the page in the stacking order.
• Keep the label short. “Top” or “Back to top” both read cleanly to a screen reader.

Show it only after the visitor has scrolled

A button sitting on screen from the first pixel just adds clutter to a page a visitor has not even started reading. Listen for the scroll event, or use an IntersectionObserver on a marker placed a few hundred pixels down the page, and toggle a visibility class once that point is passed. A common threshold is one screen height, roughly window.innerHeight, though a fixed value like 400 pixels works fine on most layouts.

If you use the scroll event directly, throttle it so the check does not run on every single pixel of movement. A simple flag combined with requestAnimationFrame keeps the toggle smooth without taxing the browser.

Make the scroll itself feel smooth

Once the button is clicked, the page should ease back to the top rather than jump. The built-in way is window.scrollTo with behavior set to smooth, which every modern browser handles natively and which respects the user’s system motion settings when combined with a reduced-motion check. There is no need for a scrolling animation library for this single interaction.

You can also set scroll-behavior: smooth directly on the html element in CSS, which covers anchor-link jumps and the back-to-top click in one line, as long as the button’s click handler still calls scrollTo or sets the anchor target.

CSS-only vs JavaScript

A CSS-only version is possible using an anchor link pointing to an id at the top of the page, combined with scroll-behavior: smooth and a position: fixed style. It shows and hides using a CSS technique such as an opacity transition tied to :target or a scroll-linked animation in browsers that support it. This route needs no script at all, but browser support for scroll-linked show and hide logic is inconsistent, and older engines fall back to an always-visible button.

A small JavaScript version is more reliable across browsers and gives you exact control over the scroll threshold, the animation, and focus handling after the click. For most sites, a script under twenty lines paired with a few CSS rules is the more predictable choice.

Placement, focus, and reduced motion

Position the button in a bottom corner, usually bottom right, with enough margin that it never sits over a footer link, a chat widget, or a cookie banner. Test the page at common breakpoints to confirm nothing overlaps.

• After the click, move keyboard focus back to the top of the page, often to the main heading or a skip-link target, so keyboard and screen reader users are not stranded on an invisible button.
• Wrap the smooth-scroll call in a check for prefers-reduced-motion, and jump instantly for visitors who have that setting on.
• Make sure the button’s contrast meets standard accessibility guidelines against whatever background sits behind it, since it typically floats over changing page content.

Shipping something small and watching real people use it teaches more in a week than months of planning meetings ever will.

Itamar Haim

Where Sticklight fits

A back-to-top button is one small piece of a much larger page, and Sticklight is built for the full picture. It is the vibe-coding platform for professional web creators that turns a prompt into a production-ready website, app, dashboard, CMS, or internal tool, with details like scroll behavior, focus handling, and reduced-motion support already accounted for in the output.

That scope is what sets it apart from a single component fix: Sticklight is built for creators who want to go beyond a single website and toward a full-stack creator role, shipping a whole product rather than one interaction at a time.

WordPress and Elementor remain a strong home for content and page building, and Sticklight extends what you can do from there, adding the same attention to accessible, production-ready interface details across everything you build.

Frequently asked questions

Do I need a JavaScript library to add a back-to-top button?

No. A native scroll listener or IntersectionObserver paired with window.scrollTo and behavior set to smooth covers the whole interaction, so no animation library is required.

When should the back-to-top button appear on the page?

Most sites reveal it after the visitor scrolls roughly one screen height down, or a fixed value like 400 pixels, so it does not clutter the page before there is anywhere to scroll back from.

Can I build a back-to-top button with only CSS?

Yes, using an anchor link to a top id combined with scroll-behavior: smooth and position: fixed, though showing and hiding it reliably across browsers is easier to control with a small script.

How do I keep the button accessible for keyboard and screen reader users?

Use a real button element with a clear label or aria-label, move focus back to the top of the page after the click, and check prefers-reduced-motion so the scroll jumps instantly when that setting is on.

Where should the back-to-top button sit so it does not cover content?

A bottom corner with enough margin from the edge is the common placement, and it is worth testing at common breakpoints to confirm it never overlaps a footer link, chat widget, or cookie banner.

Built by the Elementor team. Powered by Claude.

Let it glow.