DEV Community

loading...

Discussion on: React: Super Simple Smooth Scrolling

Collapse
bramus profile image
Bramus!

Or how about some CSS that takes care of all of this for you?

html {
  scroll-behavior: smooth;
}
Enter fullscreen mode Exit fullscreen mode

DONE. 😱

(Not supported in Safari though — Meh 😕)

Collapse
holdmypotion profile image
Rahul Author

Hey, Bramus! I don't think you can use "scroll-behavior: smooth" for something like this.
Here I created a pen for you
codepen.io/holdmypotion/pen/poNZzzo

I would love to know if there is a way. Do let me know :)

Collapse
bramus profile image
Bramus!

To scroll to a point in a page you need a link target. You can use <a name="foo" ></a> for this, or give your element an id <div id="foo"></div>. When now linking to #foo the page will scroll to said element.

Combined with scroll-behavior: smooth;, it will be scrolled smoothly.

Thread Thread
holdmypotion profile image
Rahul Author

Yea, I am quite aware of this use case. But can this be used to implement an overall smooth scrolling effect?
Like this: lic4s.csb.app/

Thread Thread
bramus profile image
Bramus!

Yes, because the browser provides that out-of-the-box 🥳