VUE使用锚点的解决方案--scrollIntoView

scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，

调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部不一定齐平

<div class="tab"><a href="#" @click="Tocontone">基本信息</a><a href="#" @click="Toconttwo">使用状态</a><a href="#" @click="Tocontthree">位置信息</a><a href="#" @click="Tocontfour">采购信息</a><a href="#" @click="Tocontfive">质保信息</a><a href="#" @click="Tocontsix">折旧信息</a>
</div><div class="contentview"><!-- 第一部分 --><div class="infocontent" id="contone"><div class="information"><div class="informationtap"><p>基本信息</p></div></div><div class="informationdetail"><div class="infoimg"><div><img src="../../assets/images/informationview/infomate.png" alt=""></div></div><div class="infodetail"><table><tr><td>设备编号</td><td>{
   {equipmentInfo.equipmentNo}}</td><td>规格</td><td>{
   {equipmentInfo.specification}}</td><td>创建时间</td><td>{
   {equipmentInfo.addDateTime}}</td><td>参数1</td><td>{
   {equipmentInfo.parameter1}}</td></tr></table></div></div></div><!-- 第二部分 --><div class="infocontent"  id="conttwo"><div class="information"><div class="informationtap"><p>使用状态</p></div></div><div class="usingstate"><div class="statetable"><table><tr><td>使用状态</td><td>{
   {useStatus.useStatus}}</td><td>界限值-高</td><td>{
   {useStatus.limitValueHigh}}</td><td>报警值-高</td><td>{
   {useStatus.alertValueHigh}}</td></tr></table></div></div></div><!-- 第三部分 --><div class="infocontent"  id="contthree"><div class="information"><div class="informationtap"><p>位置信息</p></div></div><div class="locationinfo"><div class="locationdetail"><table><tr><td>街区编码</td><td>{
   {locationInfo.locationNo}}</td><td>街区名称</td><td>{
   {locationInfo.locationName}}</td><td>大厦编码</td><td>{
   {locationInfo.buildingNo}}</td><td>大厦名称</td><td>{
   {locationInfo.buildingName}}</td></tr></table></div></div></div><!-- 第四部分 --><div class="infocontent"  id="contfour"><div class="information"><div class="informationtap"><p>采购信息</p></div></div><div class="purchasing"><div class="purchasinfo"><table><tr v-for="pur in purchase.supplierPerson"><td>{
   {purchase.supplierName}}</td><td></td><td>联系人</td><td>{
   {pur.supplierPersonName}}</td><td>电话</td><td>{
   {pur.supplierPhone}}</td><td>岗位</td><td>{
   {pur.supplierPost}}</td></tr></table></div></div></div><!-- 第五部分 --><div class="infocontent" id="contfive"><div class="information"><div class="informationtap"><p>时间日期</p></div></div><div class="timedate"><div class="dateinfo"><table><tr><td>生产日期</td><td>{
   {timeDate.productionDate}}</td><td>采购日期</td><td>{
   {timeDate.purchaseDate}}</td><td>入库日期</td><td>{
   {timeDate.storageDate}}</td><td>启用日期</td><td>{
   {timeDate.runDate}}</td></tr></table></div></div></div><!-- 第六部分 --><div class="infocontent" id="contsix"><div class="information"><div class="informationtap"><p>文档信息</p></div></div><div class="documentinfo"><div ><table><tr><td>文档名称</td><td>文档类型</td><td>文档概述</td><td>上传时间</td><td>上传人</td><td>操作</td></tr></table></div></div></div></div>
<script>
methods:{Tocontone(){document.querySelector("#contone").scrollIntoView(true);},Toconttwo(){document.querySelector("#conttwo").scrollIntoView(true);},Tocontthree(){document.querySelector("#contthree").scrollIntoView(true);},Tocontfour(){document.querySelector("#contfour").scrollIntoView(true);},Tocontfive(){document.querySelector("#contfive").scrollIntoView(true);},Tocontsix(){document.querySelector("#contsix").scrollIntoView(true);}
}
</script>