前端简单地 实现方法大家都会,无非就是在把 a 标签的 href 写成想要跳到的元素的id ,比如点击 <a href="#box"></a> 页面就会自动滚动到 <div id="box"></div> 元素的位置。
但后面发现每次点击都会更换浏览器url地址
有的时候可能不会产生任何问题,直接跳转过去立马完成产品的需求,但是当存在多个锚点的时候,我们会突然发现用户点击浏览器后退按钮并不会跳转太之前的页面,而是放回上一个带有锚点的链接,
我用的vue,在这样的情况下无法返回到上一页
锚点埋藏
<div class="content-city" :id="letter">{{letter}}</div>
事件触发
<span " v-for="(item,index) in letterCityList" @click="currentcity_s(index,item.name)" :key="index">{{item.name}}</span>
js代码
theletter_zimi(item){
//实现描点效果
let id = '#' + item;
document.querySelector(id).scrollIntoView(true);
},
这样就可以实现锚点且不改好url地址的功能