使用CSS的scroll-behavior

scroll-behavior: auto | smooth | inherit | unset

一般我们使用auto和smooth就可以了，smooth表示滚动很平滑，有过渡效果，auto没有过渡效果，一闪而过。

我们一般回到顶部的话把这个属性设置在html上即可。代码如下

只使用 html a 标签实现

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="container" class="box">
    <p>Hello, Backtotop</p>
    <br/>
    <p>Hello, Backtotop</p>
    <br/>
    <p>Hello, Backtotop</p>
    <br/>
    <p>Hello, Backtotop</p>
    <br/>
    /* 省略部分代码 */
</div>
<a href="#container" class="backto-top-btn">回到顶部按钮</a>
1
2
3
html {
    scroll-behavior: smooth;
}

使用js实现

获取到元素的dom对象，然后调用scrollIntoView方法即可。

1
2
3
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数