a标签锚点跳转路径不变且平滑过渡

orange �

于 2020-09-27 16:42:25 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44610025/article/details/108831103

本文探讨了a标签锚点跳转在路由变化和平滑性方面的两个问题，并提出了解决方案，旨在实现路径不变且平滑的页面跳转体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

a标签的定位锚点跳转非常好用，但是存在两个小问题：

1、路由发生变化

2、跳转过于生硬

解决办法：

<ul>
	  <li >top</li>
	  <li><a @click = "jump('#hot')">推荐</a></li>
	  <li><a @click = "jump('#first')" >1楼</a></li>
	  <li><a @click = "jump('#second')">2楼</a></li>
	  <li><a @click = "jump('#third')" >3楼</a></li>
	  <li><a @click = "jump('#forth')" >4楼</a></li>
	  <li><a @click = "jump('#fifth')" >5楼</a></li>
</ul>


// methords：

jump(querry) {
   this.$el.querySelector(querry).scrollIntoView({
      behavior: "smooth", // 平滑过渡
      block: "start" // 上边框与视窗顶部平齐。默认值
   });
},