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