vue 里面锚点定位的问题
发布于 4 年前 作者 ab8512 4064 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

场景

下面这段代码题主本质是想跳转到锚点位置, 由于使用了router 直接跳转路由了

<a href="#id"></a>

解决方案

hash mode

hash 跟 锚点有冲突, 如要实现就自己写下, 利用 scrollTop及offsetTop轻松做到

goAnchor(id) {
    var anchor = document.getElementById(id);
    // chrome
    document.body.scrollTop = anchor.offsetTop;
    // firefox
    document.documentElement.scrollTop = anchor.offsetTop;
    // safari
    window.pageYOffset = anchor.offsetTop;
}

history mode

history 就更简单了, 直接利用 scrollBehavior 解决

回到顶部