跳到主要内容

JavaScript 平滑回到顶部

· 阅读需 2 分钟
Junjie

scrollIntoView()​

Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

使用scrollIntoView()方法实现平滑回到顶部。

语法​

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

参数​

alignToTop (可选) 布尔值

  • 如果为true ，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"} 。这是这个参数的默认值。
  • 如果为false ，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。

scrollIntoViewOptions (可选) 一个包含下列属性的对象：

  • behavior 可选

    定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。

  • block 可选

    定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。

  • inline 可选

    定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

示例​

var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
注意

取决于其它元素的布局情况，此元素可能不会完全滚动到顶端或底端。

代码实现​

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平滑回到顶部</title>
    <style>
        body {
            height: 2000px;
        }

        #btn {
            width: 100px;
            height: 100px;
            background: red;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
<button id="btn">点击回到顶部</button>
<script>
    let element = document.getElementById("btn");
    element.onclick = () => {
        let body = document.querySelector('body');
        body.scrollIntoView({
            behavior: 'smooth',
            block: 'start',
        })
    }
</script>
</body>

</html>