Author
Chris Coyier
17 Comments
Go to Comments
It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
Smooth scrolling has gotten a lot easier. If you want it all the time on your page, and you are happy letting the browser deal with the duration for you, it's a single line of CSS:
html {
scroll-behavior: smooth;
}
I tried this on version 17 of this site, and it was the second most-hated thing, aside from the beefy scrollbar. I haven't changed the scrollbar. I like it. I'm a big user of scrollbars and making it … Read article
This is an interesting read on the current state of scrollbars and how to control their behavior across operating systems and browsers. The post also highlights a bunch of stuff I didn’t know about, like Element.scrollIntoView()
and the scroll-behavior
CSS property.
My favorite part of all though? It has to be this bit:
… Read articleIn the modern web, relying heavily on custom JavaScript to achieve identical behavior for all clients is no longer justified: the whole idea of “cross-browser compatibility” is
The scroll-behavior
property in CSS allows us to define whether the scroll location of the browser jumps to a new location or animates the transition when a user clicks a link that targets an anchored position within a scrolling box.… Read article
Hey! Before you go too far down the rabbit hole of JavaScript-based smooth scrolling, know that there is a native CSS feature for this: scroll-behavior
.
html {
scroll-behavior: smooth;
}
And before you reach for a library like jQuery to help, there is also a native JavaScript version of smooth scrolling, like this:
// Scroll to specific values
// scrollTo is the same
window.scroll({
top: 2500,
left: 0,
behavior: 'smooth'
});
// Scroll certain amounts from current position
window.scrollBy({
… Read article