JS滚动到指定元素

这里用到了HTML5标准的scrollIntoView()方法。
那么先看代码案例:

<!DOCTYPE html>
<html lang="en">
<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>Scroll Test</title>
</head>
<body>
    <button onclick="goto_fb()">Go</button>
    <div class="f_box">
        This is text for test.
    </div>
</body>
<script>
    let f_b = document.getElementsByClassName("f_box")[0];

    // 滚动到f_b的位置(f_b是类名为f_box的一个元素节点)
    function goto_fb()
    {
        f_b.scrollIntoView({behavior:"smooth"});
    }

    // 该函数的作用是生成100个p标签元素，方便展示滚动效果。
    function create_ps()
    {

        let str = ""
        for(let i = 0; i < 100; i++)
        {
            str += "<p>"+String(i)+"</p>"
        }
        let ps = document.createElement("div");
        document.body.insertBefore(ps, document.getElementsByClassName("f_box")[0]);
        ps.innerHTML = str;
    }
    // 生成100个p标签元素
    create_ps();
</script>
</html>

以上的代码展现的效果中，点击”Go”按钮即可触发滚动效果。因为我将behavior设置为了”smooth”，所以会有一段页面滚动的效果，如果将behavior设置成为”auto”，则会直接跳转到目的元素的位置。
那么这里是一些用法:
alignToTop: 这是一个布尔值。
当其为true时，窗口滚动后元素的顶部与视口顶部对齐。当其为false时，窗口滚动后元素的底部与视口底部对齐。
scrollIntoViewOptions是一个选项对象。
behavior: 定义过渡动画，可取的值为”smooth”和”auto”，默认为”auto”。
block: 定义垂直方向的对齐，可取的值为”start”, “center”, “end”和”nearest”，默认为”start”。
inline: 定义水平方向的对齐, 可取的值为”start”, “center”, “end”和”nearest”，默认为”nearest”。
alignToTop和scrollIntoViewOptions一起用:

1	f_b.scrollIntoView(false, {behavior:"auto"});

那么本篇完。