欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js实现锚点

程序员文章站 2022-03-28 20:22:33
...

实现效果

如下图,点击红色方框,页面会滚动到本页面的相应位置
js实现锚点

实现步骤

  • 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;
  },

相关标签: 工作

上一篇: 银行面试题

下一篇: 语录榮小铺