锚点设置的几种方法（可以不改变url）

所谓锚点，就是设置同一页面的快捷点，通过点击固定在屏幕上的本页导航栏，从而迅速跳转到页面的某个位置。
锚点的运用十分广泛，一般出现在某个网站的首页，或者内容较多的网页中

介绍几种实现锚点的方式

实现

第一种 通过a标签设置锚点（会改变当前地址的路由！！！）

a标签除了跳转页面以外，还可以设置锚点，通过给a标签的href属性，给对应的元素绑定同样的id值，就可以同一页面内的跳跃。
对应的元素标签也可以是a标签，给a标签设置对应的name值，实现同一页面内的跳跃。
上代码

//快捷导航设置
//a标签的href属性,必须带#,点击a标签后，产生跳跃
<li><a href="#miao">去找喵星人</a></li>
<li><a href="#wang">去找汪星人</a></li>//需要跳跃的地方
//要跳跃的地方,通过给标签绑定id属性，没有#
<h3 id="miao">喵星人基地</h3><!--设置锚点方法2--><p>喵喵喵~</p><p>喵喵喵~</p><p>喵喵喵~</p><p>喵喵喵~</p><p>喵喵喵~</p><p>喵喵喵~</p>// 只有a标签可以设置name属性，不带# 与其他标签绑定id效果一致
<a name="wang"></a><p>汪汪汪~</p><p>汪汪汪~</p><p>汪汪汪~</p><p>汪汪汪~</p><p>汪汪汪~</p><p>汪汪汪~</p>

第二种 通过DOM操作，事件控制跳转(‘跳转的位置受限，只能顶部对齐或者底部对齐，切换无动画，生硬’)

设置导航标签，绑定点击事件，在事件里，选中想要跳转的元素，执行scrollIntoView() 实现页面内的跳转。

vue代码

//快捷导航
<div @click="onToYear">点击跳转
</div>//想要跳转的地方
<div id="year">锚点设置</div>methods: {onToYear: function () {const a = document.getElementById("year");a.scrollIntoView();
},
}

这个方法的兼容性还是可以的

第三种 监听浏览器当前高度和设置跳转高度（较复杂，但更自由）

通过js监听页面当前滚动条的高度，点击不同的导航标签后，通过控制浏览器的滚动条高度，实现快捷导航，展示不同内容的目的。

逻辑相比前两种方式稍微复杂一些，但更加灵活，可以自由控制。

实现方式
首先设置锚点元素。 其次，在js代码中将设置的锚点元素在当前页面的高度获取到，多个锚点元素的高度用一个数组进行保存。

其次设置导航元素。每一个导航点点击之后，跳跃到对应的锚点元素的高度，之前获取的锚点元素页面高度的数组就有用了。

第四种，获取要跳转的某个元素的offsetTop

<div v-for="item in showQuestionList" :id="`paper-question-${item.order}`">这是很多元素
</div>
<divv-for="item in showQuestionList":key="item.order"@click="onClickCardItem(item.order)"
>{{ item.order }}
</div>onClickCardItem(order) {const targetDom = document.getElementById(`paper-question-${order}`);const top = targetDom?.offsetTop;document.documentElement.scrollTop = top;document.body.scrollTop = top;},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！