To add a back to top button in WordPress, install ExtenderX, open ExtenderX → Site Enhancements → Navigation & Scrolling and enable Back to Top Button. Choose a style preset, icon and position, set when it appears, and save. It works on any theme. For long articles, add the free Scroll Progress Bar from the same screen.
When a back to top button helps
On long pages — guides, documentation, product listings, long FAQ pages — a back to top button saves visitors a lot of scrolling, especially on phones. On short pages it's clutter. If most of your pages fit on two screens, skip it.
Option 1: ExtenderX (free)
ExtenderX includes a Back to Top Button among its navigation tools.
- Install ExtenderX from Plugins → Add New and activate it.
- Go to ExtenderX → Site Enhancements → Navigation & Scrolling.
- Enable Back to Top Button.
- Pick a style preset and icon, set the position (usually bottom right), and set the visibility rules.
- Save and scroll down a long page to test it.
The same screen has:
- Scroll Progress Bar — a reading-progress line at the top of the page.
- Sticky Header and Smart Scroll, which hides the header as visitors scroll down and brings it back when they scroll up.
- Scrollspy, which highlights the navigation link for the section on screen — useful on one-page sites.
- Sticky Footer Bar for a persistent strip at the bottom.
ExtenderX Pro adds a Scroll to Bottom button that stacks beside Back to Top, smooth scrolling powered by Lenis, and a scrollbar styler.
Option 2: WPFront Scroll Top
WPFront Scroll Top (200,000+ active installs) is the best-known dedicated plugin. Its readme lists:
- Text, custom image (PNG/SVG) or Font Awesome icon buttons.
- Smooth scrolling, and a button that can scroll to an element on the page or link to another URL.
- An option to hide it on small screens, show or hide it on specific pages, and auto-hide it after a while.
- ARIA labels and screen-reader text.
Pick it if: you want only a back to top button with fine control, and no other tools.
Comparison
From WPFront Scroll Top's WordPress.org readme as of October 27, 2026. Disclosure: WPXERO makes ExtenderX.
| ExtenderX | WPFront Scroll Top | |
|---|---|---|
| Back to top button | Free, with style presets | Free, text, image or icon |
| Position and visibility options | Yes | Yes, incl. per page and small screens |
| Scroll to a page element or URL | — | Yes |
| Scroll to bottom button | Pro | — |
| Reading progress bar | Free | — |
| Sticky header, smart scroll, scrollspy | Free | — |
| Other tools | Accessibility toolbar, dark mode, animations, banners and more | — |
If you only need the button, both work. If you'd otherwise install separate plugins for a sticky header, a progress bar and an accessibility toolbar, ExtenderX replaces them in one.
Design tips
- Small and out of the way. About 40–48px, in a corner, with enough space from the screen edge to tap easily.
- Only after scrolling. Show it once the visitor has scrolled a screen or two, not at the top of the page.
- Clear icon. An upward arrow or chevron. Text like "Top" helps if your audience is less technical.
- Accessible. The button needs a text label for screen readers ("Back to top") and a visible focus outline for keyboard users. ExtenderX's free Enhanced Focus Outlines help if your theme hides them.
- Don't stack floating buttons. A back to top button, a chat bubble, a WhatsApp button and a cookie notice in the same corner cover each other. Put them on different sides, or drop one.
- Mobile bottom bars. If you use a mobile bottom navigation bar such as MenuVerse, raise the back to top button above it or hide it on phones.
Without a plugin
A link to #top (or to your page's top anchor) works with no plugin, and CSS scroll-behavior: smooth on the html element makes it glide. A plugin adds the parts that are fiddly by hand: appearing only after scrolling, consistent styling and per-page rules.
For the full list of what ExtenderX includes, see the ExtenderX plugin page, or compare all-in-one toolkits in ASE vs ExtenderX.