美文网首页
Vue路由hash模式下锚点滚动实现

Vue路由hash模式下锚点滚动实现

作者: hao102 | 来源:发表于2022-01-10 15:02 被阅读0次

    Vue路由在hash模式下#已被占用;无法使用浏览器的锚点功能;用js实现代替

    /**
     * 使用js实现锚点滚动功能;字符串需要是'#id'锚点格式;数字的话标识要滚动的位置
     * @param {String,Number} selector 
     */
    export function goAnchor(selector) {
        let top = 0;
        const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        if (typeof selector === 'number') {
            top = selector - scrollTop;
        } else {
            const anchor = document.querySelector(selector) || { offsetTop: 0 };
            top = anchor.offsetTop - scrollTop;
        }
        window.scrollBy({ top, behavior: 'smooth' })
    }
    

    相关文章

      网友评论

          本文标题:Vue路由hash模式下锚点滚动实现

          本文链接:https://www.haomeiwen.com/subject/bgvmcrtx.html