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 matchAdd a smooth back-to-top control in WordPress either with a small button and JavaScript, or with a plugin that supplies the button and settings. If you want smooth scrolling across the site rather than just a top button, CSS may be enough. In either case, account for reduced-motion preferences, keyboard access, and any fixed header that could obscure the destination.
Choose the approach that fits your site
| Approach | Best fit | What it provides |
|---|---|---|
| Custom button with JavaScript | You need only a back-to-top control and can add and maintain a small site-specific change. | A button wired to the browser’s smooth scroll API; you control its markup and design. MDN documents the scroll behavior options. |
| CSS scroll behavior | You want smooth behavior for in-page scrolling across the site, not just a top button. | A CSS rule for smooth scrolling, with a reduced-motion override. A WordPress core changeset documents this approach in the Twenty Twenty theme. WordPress Core changeset 46642. |
| Plugin | You prefer a ready-made button or want controls in the WordPress admin. | Features vary: one listing focuses on CSS smooth scrolling, while another offers a configurable top button. Review each plugin’s current details and compatibility before installing. Fast Smooth Scroll and Scroll to Top. |
Add a custom back-to-top button
Use a native button for an action, with an accessible name. Add the markup where it belongs in your theme or site-specific plugin, and enqueue the JavaScript through the same update-safe integration. Avoid editing a parent theme directly: a theme update can overwrite the change.
<button type="button" class="back-to-top" aria-label="Back to top">
Back to top
</button>Then connect the button to window.scrollTo():
document.querySelector('.back-to-top')?.addEventListener('click', () => {
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
window.scrollTo({ top: 0, behavior: reduceMotion ? 'instant' : 'smooth' });
});The smooth option requests animated scrolling; instant avoids that animation. This is an implementation sketch rather than tested drop-in code: adapt script loading and browser support to the site’s setup. See MDN’s Window.scrollTo reference for the available behavior options.
Use CSS for site-wide smooth scrolling
If the goal is smooth scrolling for in-page links as well as a top control, set the behavior on the document root and disable it for visitors who request reduced motion:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}The Twenty Twenty theme’s WordPress core changeset records replacing its JavaScript smooth-scroll implementation with CSS scroll-behavior and including a prefers-reduced-motion: reduce enhancement. WordPress developer guidance also recommends putting animation and transition rules in a reduced-motion media query or using its reduced-motion hook: WordPress accessibility coding standards. W3C WAI describes using this preference in JavaScript to prevent motion: WAI technique C39.
There is an important distinction: a JavaScript call that explicitly requests behavior: 'smooth' does not automatically become instant just because CSS sets scroll-behavior: auto. Check the reduced-motion preference in JavaScript as in the example above, or use behavior: 'auto' when you want the computed CSS behavior to decide. MDN explains the difference between smooth, instant, and auto in its scrollTo documentation.
Choose and install a plugin
Plugins are useful when you want a control without writing the button and its behavior yourself. Their scope differs, so choose according to whether you need a top button, general smooth scrolling, or both.
Fast Smooth Scroll
The WordPress.org listing for Fast Smooth Scroll describes CSS-based smooth scrolling, an optional JavaScript polyfill for browsers without the CSS property, no settings screen, and an offset filter for fixed-header cases. The listing’s reported version, installation count, WordPress and PHP requirements, and tested-through version can change; check the live listing against your WordPress and PHP versions before installing.
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 page or post-type targeting. Its listed setup is to install through Plugins in the WordPress dashboard or upload it manually, then configure it under Settings. The listing claims keyboard navigation, ARIA labels, and reduced-motion support; check those behaviors on your site rather than treating a plugin description as a substitute for testing.
Install and verify
- In the dashboard, open Plugins > Add New Plugin, search for the plugin, and review its current WordPress.org listing and compatibility information. The exact dashboard label can vary by WordPress version.
- Select Install Now, then Activate. If installing manually, follow the listing’s upload instructions and activate the plugin from the Plugins screen.
- For a configurable plugin, open its documented settings area, choose the button’s position and appearance, and set when it should appear if that option is available.
- Check the live site at desktop and mobile widths. Confirm that the control is visible when expected, can be reached and activated with a keyboard, and does not cover other floating controls or content.
Check accessibility and page layout
- Keyboard access: Tab to the control and activate it with the keyboard. Make sure its focus indicator is visible and its accessible name communicates its purpose. A native
<button>provides the appropriate control semantics for an action. - Reduced motion: Honor
prefers-reduced-motionfor CSS and JavaScript behavior. The Twenty Twenty changeset, WordPress accessibility guidance, and W3C WAI describe relevant approaches. - Fixed and sticky headers: A header or floating control can make a scroll destination appear vertically misaligned or hide content. Test the actual page layout at desktop and mobile sizes. Fast Smooth Scroll’s listing documents an offset filter for fixed-header situations.
Why can scrolling land slightly off vertically?
A fixed or sticky header may sit over the top of the page after the scroll, making the destination look offset. If the issue affects in-page anchor links, use an appropriate scroll offset or account for the header in the page’s CSS. The Fast Smooth Scroll listing documents an offset filter for this situation; its configuration depends on that plugin. Check the header height at both desktop and mobile sizes, since the layout can differ.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Keep back-to-top behavior separate from client-side navigation
A back-to-top button handles its own click; it does not necessarily manage where the page lands after client-side navigation. WordPress’s Interactivity API handbook says its router does not automatically manage scrolling or focus and shows calling window.scrollTo after navigation. Treat that as a separate navigation concern: Interactivity API route overview.
Quick Recap
Best Value
Rank #4
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.
