HTML跳转页面指定位置的几种方法
程序员文章站
2022-06-07 13:13:52
...
由于页面显示的信息总是有限的,因此我们需要得以跳转到页面指定位置的实现
- 纯html实现
- 跳转时机:<a href="#anchorName">点击跳转到name为anchorName的位置</a>
- 埋锚点:<a name="anchorName">a标签的锚点</a>,<p id="anchorName">以id为标记的锚点</p>
- 分析:当点击a标签就会跳到锚点处,没有缓冲效果,体验一般,而且url里会添加"#anchorName"。这在SPA应用里是不可接收的,因为这影响了路由配置。刷新页面无效。
- JavaScript辅助(window.scrollTo方法)
- window.scrollTo({ top,left ,behavior}),分别为数字、数字、字符串。指定跳转到距离文档顶部、左边的距离,以及跳转效果(smooth、instant)
- 跳转时机:添加事件监听
- 获取元素到文档顶部的距离(offsetTop属性),offsetTop返回当前元素相对于其
offsetParent
元素的顶部的距离,因此我们要通过循环的方式累加来拿到距离文档最顶部的距离
function heightToTop(ele){
//ele为指定跳转到该位置的DOM节点
let bridge = ele;
let root = document.body;
let height = 0;
do{
height += bridge.offsetTop;
bridge = bridge.offsetParent;
}while(bridge !== root)
return height;
}
//按钮点击时
someBtn.addEventListener('click',function(){
window.scrollTo({
top:heightToTop(targetEle),
behavior:'smooth'
})
})