Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallFor a normal page that scrolls in the browser viewport, add scroll-behavior: smooth to the html element. If animation should occur only when the button is clicked, call window.scrollTo({ top: 0, behavior: "smooth" }) in the button’s event handler. Apply the rule or API to the element that actually scrolls.
Option 1: Enable smooth scrolling with CSS
The shortest page-level implementation is:
html {
scroll-behavior: smooth;
}This controls scrolling initiated by navigation and CSSOM scrolling APIs on the root scrolling box; it does not animate scrolling performed directly by the user. See the MDN scroll-behavior reference.
As an Amazon Associate I earn from qualifying purchases.
Respect reduced-motion preferences
Some visitors ask their operating system or browser to reduce motion. Restrict the animation to users who have not made that request:
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}Outside that media query, the browser uses its normal scrolling behavior.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Option 2: Animate only the Back to Top button
Use the Window scrolling API when the smooth effect belongs specifically to the button:
<button type="button" id="back-to-top">Back to top</button>
<script>
const backToTopButton = document.querySelector("#back-to-top");
backToTopButton.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
</script>top: 0 targets the top of the document viewport. The MDN window.scrollTo() documentation defines behavior: "smooth" for an animated scroll and behavior: "auto" for the computed CSS behavior.
Combine the handler with reduced-motion support
If you use JavaScript, check the visitor’s preference before requesting animation:
Free tools Windows power users keep installed
One-click scans. No signup required.
const backToTopButton = document.querySelector("#back-to-top");
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
backToTopButton.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: reduceMotion.matches ? "auto" : "smooth"
});
});Make sure you target the real scrolling element
The viewport and an in-page portal panel are different scrolling boxes. A rule on an element that does not scroll cannot animate another element’s scrolling.
Rank #3
Document viewport
For ordinary page scrolling, put the CSS declaration on html. MDN notes that the root-level rule applies to the viewport; placing it on body does not propagate it to the viewport. MDN explains the root-scrolling behavior.
Nested overflow container
If your portal keeps content in a scrollable panel, give that panel the behavior:
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
.portal-content {
overflow-y: auto;
scroll-behavior: smooth;
}Then scroll the panel itself rather than the window:
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteconst panel = document.querySelector(".portal-content");
panel.querySelector(".back-to-top").addEventListener("click", () => {
panel.scrollTo({
top: 0,
behavior: "smooth"
});
});Choosing between CSS and JavaScript
| Approach | Best for | Scope | Important limitation |
|---|---|---|---|
html { scroll-behavior: smooth; } |
A site-wide, declarative default | Root scrolling triggered by navigation or CSSOM APIs | The browser chooses the easing and duration |
window.scrollTo({ top: 0, behavior: "smooth" }) |
A button-specific action | Only the code path that calls it | You must attach and maintain the event handler |
Element scroll-behavior and element.scrollTo() |
Portals with an overflow panel | The selected scrolling container | Using window will not move the nested panel |
What timing and compatibility to expect
The smooth value requests an animation, but CSS does not provide a duration property for it. Easing and duration are chosen by the user agent, so timing can vary between browsers and devices. User agents are also permitted to ignore scroll-behavior; provide a usable instant-scroll fallback rather than depending on the animation.
MDN lists the CSS property as widely available across browsers since March 2022. Check the current compatibility details on MDN when your portal has a strict browser-support requirement.
If code needs to wait for a promise from a scrolling operation, feature-detect that behavior: MDN notes that some browsers do not support promise-returning scroll operations even though smooth scrolling itself may work. See the API’s compatibility notes.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting checklist
- Nothing moves: confirm the button’s click handler runs and that the page or panel has content above the current position.
- The page jumps instantly: check whether the browser is honoring smooth behavior, whether reduced motion is enabled, or whether another script calls
scrollTowithbehavior: "auto". body { scroll-behavior: smooth; }has no effect: move the declaration tohtmlfor viewport scrolling.- The wrong area scrolls: identify the element with
overflow: autooroverflow: scrolland call that element’sscrollTo(). - The button submits a form: keep
type="button"on the control so its click does not submit the surrounding form. - Motion is uncomfortable: honor
prefers-reduced-motion: reduceand allow an instant return to the top.
Recommended implementation
For most web portals, start with the reduced-motion-aware CSS rule:
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}Add the explicit window.scrollTo handler when only the Back to Top control should animate, or use the equivalent element API when the portal scrolls inside a nested container. The SitePoint discussion that prompted this question is archived at SitePoint Community.
Quick Recap
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.
