vue跨页面定位到锚点位置
效果:
header页面:
<a :href="'#/about?maodian=gsjj'">公司介绍</a>
<a :href="'#/about?maodian=fzlc'">发展历程</a>
<a :href="'#/about?maodian=ryzz'">荣誉资质</a>
<a :href="'#/about?maodian=mtsy'">媒体声誉</a>
about页面:
<script>
import {goAnchor,GetQueryString} from '../../static/js/common';
export default {
name: 'HelloWorld',
data () {
return {}
},
mounted:function (){
let maodian=this.GetQueryString('maodian');//进入页面,如果带有锚点参数,则跳转至锚点地方,参数值就是id名
console.info("*****",maodian)
if(maodian){
this.goAnchor('#'+maodian);
}
},
methods:{
goAnchor,
GetQueryString,
},
}
</script>
about页面引入的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
}