曾几何时,我们在做页内滚动的时候,非常麻烦,需要判断页面滚动距离甚至用到各种计时器,条件判断等。
比如,一个小小的回到顶部。最简单的做法,可以用 超链接带 # ,返回顶部,但是却没有了滚动效果。
<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 试试
});
});
搞定。