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

2022-01-10  本文已影响0人  hao102

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' })
}
上一篇下一篇

猜你喜欢

热点阅读