视口中可显示的信息是有限的,因此我们常需要页面滚动实现内容显示的切换,介绍几种实现方式:
纯html实现(锚点)
- 跳转按钮:
<a href="#anchorName">点击跳转当前页面指定锚点</a>
- 设置锚点:
<a name="anchorName">a标签锚点</a>
、<p id="anchorName">id锚点</p>
分析:当点击a标签就会跳到锚点处,没有缓冲效果,体验一般,而且url里会添加"#anchorName"。这在SPA应用里是会影响路由配置。刷新页面并不会定位到锚点。
js辅助(window.scrollTo方法)
借助window.scrollTo({ top,left ,behavior})方法。
举个例子:点击按钮视口调整到某元素的上方。
- 先获取该元素到文档顶部的距离,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'
})
})
两行方法适用不同的场景,仁者见仁智者见智吧!
over
感谢阅读!