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/

Logo

前往低代码交流专区

更多推荐