<a>React 中如何通过点击锚标签( ) 更顺畅地跳转到同一页面的其他版块？</a>

Question

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.

Answer 1

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.