如何在 React 中通过单击锚标签 () 更流畅地过渡到同一页面的另一个部分<a>？

Question

上下文

我只能在没有过渡的情况下立即跳到另一个部分。我是这样做的：

<a href="#go_middle">Go Middle</a>
<div id="go_middle">Hello There</div>

期望的结果

我想有过渡效果，这样它就不会立即跳到页面的某个部分，而是更慢地跳过页面的另一个部分(如果有的话(。

Answer 1

将其添加到CSS中的适当类或id中。

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

您也可以直接将其添加到HTML标记中。

html {
scroll-behavior: smooth;
}

这将使页面平滑地滚动到右侧部分，而不会跳转。