Free tools Windows power users keep installed
One-click scans. No signup required.
The simplest custom solution is a semantic button that calls window.scrollTo({ top: 0, behavior: 'smooth' }). Add a CSS scroll-behavior rule when you want smooth scrolling for links across the site, or install a WordPress plugin when you need an admin-configurable button. Whichever route you choose, respect reduced-motion preferences, test keyboard focus, and account for fixed headers.
Choose code or a plugin
Use a small custom implementation when you only need one back-to-top control and can edit a theme safely or maintain a site-specific plugin. Choose a plugin when you want settings for appearance, position, trigger distance, speed, and which pages or post types display the control.
| Need | Best fit | Trade-off |
|---|---|---|
| One lightweight button with your own markup | Custom HTML, CSS, and JavaScript | You must maintain accessibility, responsive positioning, and update-safe integration. |
| Smooth scrolling for ordinary in-page links | CSS scroll-behavior |
It does not create a visible back-to-top button by itself. |
| Visual controls and WordPress settings | A dedicated scroll-to-top plugin | Adds another plugin to update and verify against your theme and WordPress version. |
| Site-wide CSS smooth scrolling with no settings screen | Fast Smooth Scroll | The WordPress.org listing describes a CSS approach and optional polyfill; verify its current compatibility before installing. |
WordPress core’s Twenty Twenty theme moved from a JavaScript smooth-scroll implementation to CSS and added a reduced-motion rule, demonstrating that CSS is a supported pattern rather than a browser-specific trick.
Add a custom back-to-top button
1. Add an accessible button
Place the control in a template location that appears on the pages where it is needed, or generate it from a small site-specific plugin. Use a real button because the control performs an action, and give it an accessible name.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware match#1 Best Overall
<button type="button" class="back-to-top" aria-label="Back to top">
Back to top
</button>Make sure the button has a visible focus style and remains reachable with the keyboard. A text label is often clearer than an icon-only control; if you use an icon, keep the aria-label.
2. Wire the click to a smooth scroll
document.querySelector('.back-to-top')?.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});Window.scrollTo accepts smooth, instant, and auto behavior values. Integrate this script through your child theme or a small site-specific plugin so a parent-theme update does not overwrite it.
3. Decide when the button appears
A control that is visible at the top of every page is unnecessary. Add a scroll listener or an intersection observer to reveal it only after the visitor has moved down the page, and hide it again near the top. Keep the visibility change from stealing focus.
Enable smooth scrolling with CSS
To make anchor links glide across the site, add this rule to the child theme stylesheet or the Customizer’s Additional CSS area:
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}CSS controls scroll operations that use the browser’s automatic behavior. It does not override JavaScript that explicitly requests behavior: 'smooth'. If your button calls that value directly, check the reduced-motion preference in JavaScript and use an instant scroll for people who request less motion.
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
document.querySelector('.back-to-top')?.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: reduceMotion ? 'instant' : 'smooth'
});
});WordPress developer guidance and W3C WAI both recommend honoring the user’s prefers-reduced-motion setting for animation and transitions. Test the result with that preference enabled in the operating system or browser.
Rank #4
Use a WordPress plugin instead
Fast Smooth Scroll
The WordPress.org listing describes a plugin that enables CSS scroll-behavior, includes a lightweight JavaScript polyfill for browsers that lack the CSS property, and has no settings screen. It also documents an offset filter for fixed-header layouts. At the time represented by the listing, it reported version 1.0.1, more than 800 active installations, WordPress 6.1 or later, PHP 7.4 or later, and testing up to WordPress 7.1.2. Plugin metadata changes, so check the live listing and your site’s requirements before installation.
Scroll to Top
The WordPress.org listing for Scroll to Top describes a configurable button with choices for style, position, trigger distance, scroll speed, and the pages or post types where it appears. Install it from Plugins > Add New or upload the plugin manually, then open its settings page. The listing claims keyboard navigation, ARIA labels, and reduced-motion support; verify those behaviors on your own site rather than treating a vendor description as an accessibility audit.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsBest Value
Plugin checks before activation
- Confirm the current WordPress and PHP requirements on the live plugin listing.
- Check whether the plugin adds its own CSS or JavaScript that conflicts with your theme or page builder.
- Test the button on desktop and mobile, including keyboard-only navigation and visible focus.
- Review how it handles reduced motion and fixed or sticky headers.
- Remove unused alternatives; two scroll-to-top scripts can produce duplicate buttons or competing offsets.
Fix fixed-header and layout problems
A sticky header can cover the destination after an anchor scroll, making the page appear to stop too high or too low. Measure the header’s actual height at each responsive breakpoint and apply an offset where the chosen implementation supports one. Fast Smooth Scroll documents an offset filter for this situation. Test pages with different header states, banners, and admin bars rather than assuming one desktop value works everywhere.
- Check the landing position with the header expanded and collapsed.
- Repeat the check at phone, tablet, and desktop widths.
- Look for other floating controls that overlap the button.
- Inspect browser zoom and dynamic toolbar behavior on mobile.
Handle client-side WordPress navigation separately
Sites using WordPress’s Interactivity API router should not assume that navigation automatically scrolls to the new page or moves focus. The Interactivity API handbook notes that the router does not manage those actions automatically and demonstrates calling window.scrollTo after navigation. That is separate from the back-to-top button: implement navigation scroll and focus handling in the navigation action, then keep the button’s top-scroll behavior independent.
Troubleshoot common failures
The button does nothing
- Confirm the script runs after the button exists, or load it with the appropriate deferred/enqueued WordPress setup.
- Check the browser console for JavaScript errors from another script.
- Verify that the selector exactly matches the button’s class.
Scrolling is not smooth
- Check whether another script calls
window.scrollTowithinstantbehavior. - Confirm that the CSS rule is applied to the document’s
htmlelement. - Remember that an explicit JavaScript
behavior: 'smooth'request is not changed by CSS. - Test with reduced motion disabled; an intentional instant result may be correct when the preference is enabled.
The destination is vertically misaligned
- Account for the fixed header’s height with the implementation’s offset mechanism.
- Check whether a cookie banner, admin bar, or late-loading web font changes the layout after scrolling.
- Retest after images and dynamic content have finished loading.
There are two buttons
Disable the theme’s built-in control or uninstall the additional plugin. Search the rendered page and enqueued scripts for duplicate back-to-top implementations.
Quick Recap
Pre-launch accessibility checklist
- Use a native
<button>with an accessible name. - Provide a visible focus indicator and a sensible keyboard order.
- Honor
prefers-reduced-motion: reducein CSS and in JavaScript that explicitly requests smooth motion. - Ensure the control has sufficient color contrast and does not cover essential content.
- Check the landing position beneath fixed headers.
- Test keyboard, touch, screen-reader, desktop, and mobile experiences on the actual theme.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
