- 右侧有一个悬浮菜单栏是全局的,点击之后需要跳到商城的锚点,然后开始想在query里将锚点id带过去,但是页面刷新之后参数还会存在,就改用localstorage将锚点存起来了。
1.点击锚点按钮之后,将锚点id存起来再跳转页面
localStorage.setItem('mallId', 'gift');
this.$router.push(path);
2.在商城页面的mounted里面判断缓存里是否有锚点id,有就跳转到锚点。监听页面刷新时删除锚点
mounted() {
let selectId = localStorage.getItem('mallId');
if (selectId) {
this.$nextTick(() => {
let anchor = document.querySelector('#' + selectId);
let total = anchor.offsetTop;
document.body.scrollTop = total;
document.documentElement.scrollTop = total;
});
window.addEventListener('beforeunload', this.removeSelectId);
}
},
methods:{
removeSelectId() {
localStorage.removeItem('mallId');
}
}
3.页面销毁时删掉锚点,移除刷新事件监听
destroyed() {
this.removeSelectId();
window.removeEventListener('beforeunload', this.removeSelectId);
}
4.感觉给锚点加一点动画比较自然。。动画效果使用的一个大佬的代码,链接:https://www.cnblogs.com/shaozhu520/p/10131268.html的。