How is the smooth scrolling effect imlemented here?

[rugk]

When you go to https://watercss.kognise.dev/, scroll down and click the "Back to top" button, you get a smooth scrolling animation.

This does not seem to be part of the framework (obviously I guess impossible to do with CSS), so I wonder where this came from? On my site using water.css this does not happen automatically? But would be nice if done easily.

I even checked the source code and did not find anything related to (smooth) scrolling:
https://github.com/kognise/water.css/blob/master/docs/index.html

Firefox 147

[kognise]

Hey! On the current site, this was done by setting scroll-behavior: smooth on the html element in custom CSS for the page: https://github.com/kognise/water.css/blob/master/docs/style.css#L1-L3

However, this makes it so all scrolling behavior is smooth on the page, and honestly I don't consider it a good practice. Instead, I would probably recommend using a button that triggers the following JavaScript:

window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })

[rugk]

Thanks but yea also found that in the meantime. I find it actually a cool effect, IMHO. 🙁

Thanks in any case!

water.css/docs/style.css

Line 2 in d950cbc

scroll-behavior: smooth;

docs: https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-behavior