js实现锚点
程序员文章站
2022-03-28 20:22:33
...
实现效果
如下图,点击红色方框,页面会滚动到本页面的相应位置
实现步骤
- html
在要跳转的位置加了一个类,我这里是nav-block-item
,另外还要添加点击事件jump(1)
,方法接收的参数是li的下标,也就是后面获取元素,确定要跳转到具体的哪一个“锚点”所需要用到的
<div class="nav-block-item">
<h2>基本信息</h2>
<ul>
<li>
<a href="javascript:void(0);">基本信息</a>
</li>
<li>
<a href="javascript:void(0);" @click="jump(1)">结算账户</a>
</li>
<li>
<a href="javascript:void(0);" @click="jump(2)">结算模式</a>
</li>
<li>
<a href="javascript:void(0);" @click="jump(3)">关联场地</a>
</li>
</ul>
</div>
- js
jump(index) {
// 获取有指定位置的元素
let jump = document.querySelectorAll(".nav-block-item");
// 获取需要滚动的距离,即元素在滚动的什么位置
let total = jump[index].offsetTop - 70;
//下面是不同浏览器兼容
// Chrome 谷歌(内核Blink)
document.body.scrollTop = total;
// Firefox 火狐(内核Gecko)
document.documentElement.scrollTop = total;
// Safari 苹果(内核webkit)
window.pageYOffset = total;
},