vue 实现跨页面锚点跳转
1.非跨页面的锚点跳转实现方法:<div class="content"><a href="javascript:void(0)" @click="goAnchor()">gotoOther</a></div>methods: {goAnchor() {var anchor = this.$el.querySe...
·
1.非跨页面的锚点跳转实现方法:
<div class="content">
<a href="javascript:void(0)" @click="goAnchor()">gotoOther</a>
</div>
methods: {
goAnchor() {
var anchor = this.$el.querySelector("#锚点的id或name值")
document.body.scrollTop = anchor.offsetTop
}
}
2.跨页面的锚点跳转实现方法:
例如:a组件跳转b组件的指定位置
a组件中写跳转:
<div class="content">
<a href="/b组件路由#锚点的id或name值">gotoOther</a>
</div>
注意:href中为“路由地址#锚点id”
在b组件内添加一个方法:
methods: {
goAnchor(selector) {
let anchor = this.$el.querySelector(selector)
document.documentElement.scrollTop = anchor.offsetTop
},
}
在b组件的mounted中添加:
mounted:function(){
this.$nextTick(()=> {
this.goAnchor(window.location.hash)
})
},
欢迎大家访问我的个人博客:http://blog.ycsn.xyz/
更多推荐
已为社区贡献3条内容
所有评论(0)