通常一个完整的页面可包含多屏内容,因此我们常需要通过滚动页面来阅读网页上的内容。页面上有一些可点击的链接或按钮,点击后调转到页面指定的位置,今天介绍几种实现方式。
这是我参与8月更文挑战的第20天,活动详情查看:8月更文挑战
纯html实现(锚点)
一般包含两块:
- 锚点
- 锚定物
<a href="#anchorName">点击跳转当前页面指定锚点</a>
<a name="anchorName">name锚定物</a>
<p id="anchorName">id锚定物</p>
复制代码
效果:当点击第一个a标签时,页面的顶端会滚动到后面a标签的位置。特点是:滚动过程没有缓冲效果,体验一般,而且url里会添加"#anchorName"。这在SPA应用里是可能会污染路由。所以原生的方式可能不是最佳的处理方式,当然优点是比较简单。
js辅助(window.scrollTo方法)
语法:
window.scrollTo(options)
options:{
left:number,
top:number,
behavior:"smooth"|"instant"
}
复制代码
来个需求:点击按钮将某元素滚动到屏幕的上方。
分析有以下几步:
- 先获取该元素到文档顶部的距离,
offsetTop
返回当前元素相对于其offsetParent
元素的顶部的距离。 - 通过递归循环的方式累加来获取距离文档最顶部的距离
具体实现代码如下:
function heightToTop(ele){
//ele为指定跳转到该位置的DOM节点
let root = document.body;
let height = 0;
do{
height += ele.offsetTop;
ele = ele.offsetParent;
}while( ele !== root )
return height;
}
//某按钮点击时
someBtn.addEventListener('click',function(e){
window.scrollTo({
top:heightToTop(e.target),
behavior:'smooth'
})
})
复制代码
注意:window.scrollTo只能改变最外层容器的滚动距离。如果你页面上潜逃了一个div,该div有自己的滚动距离,则不会受到影响。
scrollTop属性
通过设置scrollTop属性来直接更改容器的滚动距离。
- 设置最外层可滚动容器的滚动距离:
document.documentElement.scrollTop = 100
- 当页面最外层的滚动容器潜逃有滚动容器时:
HTMLElement.scrollTop = 100
//某按钮点击时
someBtn.addEventListener('click',function(e){
const heightToTop = heightToTop(e.target);
document.documentElement.scrollTop = heightToTop;
})
复制代码
最后
最后,感谢阅读!