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

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' })
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容