“Cancelable” Smooth Scrolling

Avatar of Chris Coyier
Chris Coyier on

Take the pain out of building site search with the Algolia hosted API. Start free now!

Here’s the situation: Your site offers a “scroll back to top” button, and you’ve implemented smooth scrolling. As the page scrolls back to the top, users see something that catches their eye and they want to stop the scrolling, so they do a smidge of a scroll on the mouse wheel,, trackpad, or whatever. That’s what I mean by cancellable. Without any further action, the scroll event goes to the destination. Cancellable means you can stop it with a subsequent scroll. I find the cancellable behavior better UX, although I have no data to back that up.

I’m finding some discrepancies between browsers, as well as between CSS and JavaScript on how this all works.

Scroll down on this demo and give it a shot:

Here’s what I experienced on the browsers I have easy access to:

CSS Smooth ScrollJavaScript Smooth Scroll
ChromeCancellable (Speed: Slowish)Not Cancellable
FirefoxCancellable (Speed: Very Fast!)Cancellable (Speed: Fast!)
SafariNo Smooth ScrollingNo Smooth Scrolling
EdgeCancellable (Speed: Fast)Not Cancellable
iOSNo Smooth ScrollingNo Smooth Scrolling

If it was up to me, I’d:

  • make smooth scroll actions triggered either through CSS or JavaScript cancellable.
  • define “cancellable” because it isn’t really the right word. Maybe “interrupted”? Or “controlled”? Ideas welcome!
  • make the speed controllable, or if not, attempt to get browsers to agree on a medium-ish speed (that stays consistent regardless of scroll distance).
  • make Safari have it. Smooth scrolling makes things like carousels without JavaScript very practical, and that’s great, particularly on mobile where iOS Safari is forced on Apple devices.