How to make the transition to another section of a same page through clicking anchor tag (<a>) smoother in React?

user_10374965 0
Viewed 367

Context

I have only been able to make an instant jump to another section without transition. Here is how I do that:

<a href="#go_middle">Go Middle</a>

<div id="go_middle">Hello There</div>

Desired Result

I want to have transition effect, so it doesn't just instantly jump to the section, but rather a slower jump through another section of the page if there are any.

reactjs css html
1 Answers

Add this to your CSS to the appropriate class or id.

.scroll-div {
  scroll-behavior: smooth;
}

You can also add it to the HTML tag directly.

html {
  scroll-behavior: smooth;
}

This will make the page scroll smoothly to the right section, without jumps.

user_140735090
Related