DEV Community

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

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

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 🥳

Thread Thread
 
jifakir profile image
JI Fakir

ha ha ha, you know nothing about html {
scroll-behavior: smooth;
}. But pretend as if you know everything. Visit the page author recommended you then compare with scroll-behavior. This is not the same thing. If you think it's possible as you calimed show us a demo. Before commenting on any topic understand the topic clearly.

Collapse
 
alecsmkt profile image
alejandro contreras

hi, you can resolve this problem with safari?

Collapse
 
alecsmkt profile image
alejandro contreras

I want to do the same from click to and when scrolling is smooth, but I don't see that it works on the iphone