Vue 路由哈希模式下的锚点定位支持

客官°小女子只卖身不卖艺 2023-03-12 10:49 3阅读 0赞

路由 hash 模式已经将\#占用, 页面的锚点功能失效，js 实现替代  
![预览][20200512133253642.gif]

/** * @description 锚链接滚动过渡 * @param {String} selector 元素ID or 定位点 */
    const 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' });
    };

> 参考资料  
> [https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollBy][https_developer.mozilla.org_zh-CN_docs_Web_API_Window_scrollBy]

[20200512133253642.gif]: /images/20230312/bf037188edb94e13bff1ca72bd1107a7.png
[https_developer.mozilla.org_zh-CN_docs_Web_API_Window_scrollBy]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollBy