vue页面内部定位到锚点位置
上个文章写了跨页面的锚点定位，锚点的页面是在mounted里调用的定位到锚点位置，只有新打开此页面时才会执行mounted，所以当前页面内进行点击定位到锚点位置不起作用，解决方法在main.js里的watch里一直监听着URL是否发生变化，如果URL变化就执行锚点定位方法。
效果：
在mian.js中添加
import {goAnchor,GetQueryString} from '../static/js/common.js';
new Vue({
el: '#app',
router,
render: h => h(App),
mounted:function(){//解决跳转到新页面不默认固定在顶部的bug
this.$router.afterEach((to, from, next) => {
window.scrollTo(0, 0)
})
},
methods:{
goAnchor,
GetQueryString,
},
watch:{
'$route.query':function(newVal,oldVal){
var maodian = newVal.maodian;
if(maodian){
this.goAnchor('#'+maodian);
}
}
}
})
mian.js中引入的common.js的内容
//跳转到锚点
function goAnchor(selector) {
console.info("selector1",selector)
var anchor = this.$el.querySelector(selector);//获取元素
console.info("anchor",anchor)
if(anchor) {
setTimeout(()=>{//页面没有渲染完成时是无法滚动的，因此设置延迟
//anchor.scrollIntoView(); //js的内置方法，可滚动视图位置至元素位置
var targetOffset=$(selector).offset().top;
console.info("targetOffset",anchor,targetOffset)
$('html,body').animate({
scrollTop: targetOffset
},
1000);
},500);
}
};
//获取参数
function GetQueryString(name){
//var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var href = window.location.href;
var r = getSearchString(name,href);
if (r != null) return decodeURI(r);
return null;
}
function getSearchString(key, Url) {
var str = Url;
str = str.substring(1, str.length);
if(str.indexOf("?")!=-1){
var arr = str.split("?")[1].split("&");// 获取？后的参数内容，并以&分隔字符串，获得类似name=xiaoli这样的元素数组
var obj = new Object();
// 将每一个数组元素以=分隔并赋给obj对象
for (var i = 0; i < arr.length; i++) {
var tmp_arr = arr[i].split("=");
obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
}
return obj[key];
}
}
export {
goAnchor,
GetQueryString
}