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

路由 hash 模式已经将#占用, 页面的锚点功能失效,js 实现替代
Vue 路由哈希模式下的锚点定位支持_第1张图片

    <div class="doc">
		<a @click="$tools.goAnchor(0)">锚点1a>
		<a @click="$tools.goAnchor('#link2')">锚点2a>
		<a @click="$tools.goAnchor('#link3')">锚点3a>
		<a @click="$tools.goAnchor('#link4')">锚点4a>
		<a @click="$tools.goAnchor('#link5')">锚点5a>
    div>
  
	<div class="constent">
        <p>锚点1p>
        <div style="height: 500px">div>
        <p id="link2">锚点2p>
        <div style="height: 500px">div>
        <p id="link3">锚点3p>
        <div style="height: 500px">div>
        <p id="link4">锚点4p>
        <div style="height: 500px">div>
        <p id="link5">锚点5p>
	div>
/**
 * @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

你可能感兴趣的:(随笔,Vue,进阶)