JavaScript 练手小技巧：简单而实用的跳转页面到指定位置

曾几何时，我们在做页内滚动的时候，非常麻烦，需要判断页面滚动距离甚至用到各种计时器，条件判断等。

比如，一个小小的回到顶部。最简单的做法，可以用超链接带 # ，返回顶部，但是却没有了滚动效果。

<a href="#">backtop</a>

现在好了，DOM 的方法 Element.scrollIntoView() 可以轻松搞定。

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

scrollIntoView()方法会滚动元素的父容器，使 element 元素对用户可见。

参数说明：

alignToTop ：可选值，一个Boolean。

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

scrollIntoViewOptions ：可选值，一个包含下列属性的对象：

behavior ：可选，定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。smooth，可以让也能跳转产生滚动效果，强烈推荐。
block：可选，定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline ：可选，定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

来个案例：跳转页面到指定标签位置。

HTML：

<div id="d1" class="d1">1</div>
<div id="d2" class="d2">2</div>
<div id="d3" class="d3">3</div>
<div id="d4" class="d4">4</div>
<div id="d5" class="d5">5</div>

<div class="backtop" id="backtop">
    <a href="javascript:void(0)">
        Top
    </a>
</div>

CSS：

*{
    margin: 0;
    padding: 0;
}
div{
    height: 400px;
    font-size: 100px;
    color: #fff;
    text-align: center;
}
.d1{  background: #e84d25; }
.d2{  background: #1970a8; }
.d3{  background: #cd23b6; }
.d4{  background: #6dd5d9; }
.d5{  background: #b1f138; }
.backtop{
    position: fixed;
    right:20px;
    bottom:30px;
    z-index: 100;
    background: #f30;
    border:2px #fff solid;
    height: 50px;
    width: 50px;
}
.backtop a{
    display: block;
    width: 50px;
    height: 50px;
    font-size: 14px;
}

JavaScript：

let backtop = document.getElementById("backtop");
let d3 = document.getElementById("d3");

backtop.addEventListener("click",function(){
    // 点击 backtop，跳转到 d3 的位置
    d3.scrollIntoView({
       behavior:"smooth",
       block: "start"     // 换成 end 试试
   });
});

搞定。

JavaScript 练手小技巧：简单而实用的跳转页面到指定位置

猜你喜欢