Vue爬坑之旅(八):vue单页面中锚点跳转
一般情况下我们在html中使用锚点时会利用链接方式请求‘#+id名称’,此时会在url后面跟一个#号。但是在单页面中会有路由误判的情况。所以在单页面中锚点可改为参数传递的方式。一、封装一个外部js:anchor.js//锚点跳转function goAnchor(selector) {var anchor = this.$el.querySelector(selector);...
·
一般情况下我们在html中使用锚点时会利用链接方式请求‘#+id名称’,此时会在url后面跟一个#号。但是在单页面中会有路由误判的情况。所以在单页面中锚点可改为参数传递的方式。
一、封装一个外部js:anchor.js
//锚点跳转
function goAnchor(selector) {
var anchor = this.$el.querySelector(selector);//获取元素
if(anchor) {
setTimeout(()=>{//页面没有渲染完成时是无法滚动的,因此设置延迟
anchor.scrollIntoView(); //js的内置方法,可滚动视图位置至元素位置
},500);
}
};
//获取参数
function GetQueryString(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}
export {
goAnchor,
GetQueryString
}
二、在需要使用锚点的页面引入js
import { goAnchor, GetQueryString } from '../js/anchor';
methods:{
goAnchor,
GetQueryString,
},
mounted(){
let maodian=this.GetQueryString('anchor');//进入页面,如果带有锚点参数,则跳转至锚点地方,参数值就是id名
if(maodian){
console.log(maodian);
this.goAnchor('#'+maodian);
}
}
更多推荐
已为社区贡献20条内容
所有评论(0)