Articles Tagged scroll-behavior

A button to return to the top of the page allows the user to quickly return to the top of the page without making too much effort. This can be very useful when the page has a lot of content or which happens, for example, on one page websites, when infinite scrolling is used, or on mobile devices where different screen sizes can cause the content to scroll extend.

Those buttons usually float in the bottom corner of sites and … Read article “How to Make an Unobtrusive Scroll-to-Top Button”

It’s kind of amazing how far HTML and CSS will take you when building a carousel/slideshow.

1. Setting some boxes in a horizontal row with flexbox is easy.
2. Showing only one box at a time with overflow and making it swipable with -webkit-overflow-scrolling is easy.
3. You can make the “slides” line up nicely with scroll-snap-type.
4. A couple of #jump-links is all you need to make navigation for it, which you can make all nice and smooth with scroll-behavior.

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 “Downsides of Smooth Scrolling”

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({