解决页面添加锚点后跳转改变URL问题

最新推荐文章于 2023-07-31 20:15:30 发布

原创最新推荐文章于 2023-07-31 20:15:30 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

js 专栏收录该内容

8 篇文章

订阅专栏

博客讨论了前端开发中使用锚点实现页面滚动时遇到的URL变化问题，当页面刷新或返回时可能导致不期望的路由行为。为了解决这个问题，建议使用JavaScript事件监听代替a标签的href属性，通过`document.querySelector`和`scrollIntoView`方法实现锚点效果，从而避免URL被修改。这种方法确保了页面滚动功能的同时，防止了不必要的路由变化。

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

　　直接奔主题，前端简单地锚点实现，把 a 标签的 href 写成想要跳到的元素的id ，比如点击 <a href="#box"></a> 页面就会自动滚动到 <div id="box"></div> 元素的位置。

　　那么这样使用会产生一个现象，那就是 url 会被改变，浏览器默认的行为会将 id 放在 url 后面。比如：http://www.xxx.com#box

　　此时返回上一页可能不是我们想要的路由，当页面刷新也会出席那问题

　解决的方法：

　　把a标签替换掉，或者不加href，我们把要点击的按钮绑定一个点击事件：

//给想要点击的元素绑定事件并传入要跳到元素的id
//因为项目使用Vue就直接写@click
<a @click="changeHash('#box2')"></a>

//使用document.querySelector实现锚点的效果
changeHash(idName) {
    document.querySelector(idName).scrollIntoView(true);
}