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

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

I’m finding some discrepancies between browsers, as well as between CSS and JavaScript on how this all works. Here’s what I experienced on the browsers I have easy access to: Chrome, Firefox, Safari and Edge. I find the cancellable behavior better UX, although I have no data to back that up.

“Cancelable” Smooth Scrolling

Wouah! Very easy to implement this lines

Nice catch there. If we were to consider UX and the user part, then I agree to this.
I would add some JS to do the ‘cancelable’ hack.

I need to add this trick to our scroll to top button here 😎

I love the CSS implementation instead of pure JS.