济南环保局官方网站,莱西网站建设哪家好,网上营销,有关图书网站建设策划书直接奔主题#xff0c;前端简单地锚点实现方法大家都会#xff0c;无非就是在把 a 标签的 href 写成想要跳到的元素的id #xff0c;比如点击 a href#box/a 页面就会自动滚动到 div idbox/div 元素的位置。 那么这…　　直接奔主题前端简单地锚点实现方法大家都会无非就是在把 a 标签的 href 写成想要跳到的元素的id 比如点击 a href#box/a 页面就会自动滚动到 div idbox/div 元素的位置。 那么这样使用会产生一个现象那就是 url 会被改变浏览器默认的行为会将 id 放在 url 后面。比如http://www.xxx.com#box  有的时候可能不会产生任何问题直接跳转过去立马完成产品的需求但是当存在多个锚点的时候我们会突然发现用户点击浏览器后退按钮并不会跳转太之前的页面而是放回上一个带有锚点的链接比如 http://www.xxx.com#box2 点击后退时 变成了 http://www.xxx.com#box1 其实还在原来的页面只是改变了 hash 值 那用户体验是极差的甚至不注意观察的用户会以为浏览器出了问题后退按钮不管用了 现在就记录一下解决的方法。 把a标签替换掉或者不加href我们把要点击的按钮绑定一个点击事件那么这个点击事件需要做什么的看下面的代码 //给想要点击的元素绑定事件并传入要跳到元素的id//因为项目使用Vue就直接写clicka clickchangeHash(#box2)/a //使用document.querySelector实现锚点的效果 changeHash(idName) { document.querySelector(idName).scrollIntoView(true); } 案例http://www.kaochong.com/course/detail-2264.html 以上就是实现点击锚点后不改变url的方法。 更多专业前端知识请上 【猿2048】www.mk2048.com