MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

JavaScript处理文档锚点滚动

2021-05-081.7k 阅读

JavaScript 处理文档锚点滚动基础概念

什么是文档锚点

在 HTML 文档中，锚点是一种用于创建指向文档特定部分链接的机制。通过在 HTML 元素上添加 id 属性，就可以定义一个锚点。例如：

<div id="section1">这是第一节的内容</div>

然后，在其他地方可以通过超链接来指向这个锚点：

<a href="#section1">跳转到第一节</a>

当用户点击这个链接时，浏览器会自动滚动到 id 为 section1 的元素位置。

为什么要用 JavaScript 处理锚点滚动

虽然 HTML 原生的锚点链接可以实现基本的滚动跳转功能，但在实际应用中，JavaScript 处理锚点滚动提供了更多的灵活性和定制性。比如，你可以实现平滑滚动效果，而不是原生的生硬跳转；可以在滚动前进行一些条件判断，例如判断用户是否登录，如果未登录则跳转到登录页面而不是执行滚动；还可以结合动画效果，让滚动过程更加美观和符合用户体验。

实现文档锚点滚动的基本方法

使用 window.location.hash

通过修改 window.location.hash 属性，可以让浏览器滚动到指定的锚点位置。例如：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF - 8">
  <title>使用 window.location.hash 滚动</title>
</head>

<body>
  <div id="section1" style="height:1000px;background-color:lightblue;">第一节</div>
  <div id="section2" style="height:1000px;background-color:lightgreen;">第二节</div>
  <button onclick="scrollToSection2()">跳转到第二节</button>

  <script>
    function scrollToSection2() {
      window.location.hash = '#section2';
    }
  </script>
</body>

</html>

当点击按钮时，window.location.hash 被设置为 #section2，浏览器会自动滚动到 id 为 section2 的元素位置。这种方式简单直接，但滚动效果比较生硬，是一种瞬间跳转的效果。

使用 scrollIntoView 方法

scrollIntoView 是 DOM 元素的一个方法，它可以将调用该方法的元素滚动到浏览器窗口的可见区域内。语法如下：

element.scrollIntoView();
element.scrollIntoView(alignToTop);
element.scrollIntoView(options);
  • alignToTop 是一个布尔值，如果为 true，元素的顶部将与视口顶部对齐；如果为 false，元素的底部将与视口底部对齐。
  • options 是一个包含更详细配置的对象，例如 { behavior: 'auto|smooth', block: 'start|center|end|nearest', inline:'start|center|end|nearest' }。

示例：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF - 8">
  <title>使用 scrollIntoView 滚动</title>
</head>

<body>
  <div id="section1" style="height:1000px;background-color:lightblue;">第一节</div>
  <div id="section2" style="height:1000px;background-color:lightgreen;">第二节</div>
  <button onclick="scrollToSection2()">跳转到第二节</button>

  <script>
    function scrollToSection2() {
      const section2 = document.getElementById('section2');
      section2.scrollIntoView({ behavior:'smooth', block:'start' });
    }
  </script>
</body>

</html>

在这个例子中，点击按钮后，id 为 section2 的元素会以平滑的方式滚动到视口的顶部。behavior:'smooth' 实现了平滑滚动效果，block:'start' 表示元素的顶部与视口顶部对齐。

平滑滚动效果的实现原理与优化

平滑滚动的原理

平滑滚动通常是通过在一定时间内逐步改变页面的滚动位置来实现的。这可以通过 requestAnimationFrame 函数结合 window.scrollTo 或 element.scrollIntoView 来实现。requestAnimationFrame 是浏览器提供的一个方法，它会在浏览器下一次重绘之前调用传入的回调函数，这样可以确保滚动操作与浏览器的刷新频率同步，从而实现流畅的动画效果。

基于 requestAnimationFrame 的平滑滚动实现

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF - 8">
  <title>基于 requestAnimationFrame 的平滑滚动</title>
</head>

<body>
  <div id="section1" style="height:1000px;background-color:lightblue;">第一节</div>
  <div id="section2" style="height:1000px;background-color:lightgreen;">第二节</div>
  <button onclick="smoothScrollToSection2()">平滑跳转到第二节</button>

  <script>
    function smoothScrollTo(target, duration = 1000) {
      const start = window.pageYOffset;
      const end = document.getElementById(target).offsetTop;
      const distance = end - start;
      let startTime = null;

      const easeInOutQuad = (t, b, c, d) => {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
      };

      const step = (timestamp) => {
        if (!startTime) startTime = timestamp;
        const elapsed = timestamp - startTime;
        const progress = Math.min(elapsed / duration, 1);
        window.scrollTo(0, easeInOutQuad(progress, start, distance, duration));
        if (elapsed < duration) {
          requestAnimationFrame(step);
        }
      };

      requestAnimationFrame(step);
    }

    function smoothScrollToSection2() {
      smoothScrollTo('section2');
    }
  </script>
</body>

</html>

在上述代码中，smoothScrollTo 函数实现了平滑滚动到指定目标元素的功能。duration 参数指定了滚动动画的持续时间，默认为 1000 毫秒。easeInOutQuad 函数是一个缓动函数，用于控制滚动的速度变化，这里使用的是二次缓动函数，使滚动效果更加自然。step 函数在每次 requestAnimationFrame 调用时被执行，它根据当前的时间进度计算出应该滚动到的位置，并调用 window.scrollTo 进行滚动。

平滑滚动的优化

  1. 性能优化：在滚动过程中，频繁的重排和重绘会影响性能。尽量避免在滚动动画中修改元素的布局样式，例如改变元素的宽度、高度、边距等。如果必须修改，尽量在动画开始前或结束后进行。
  2. 兼容性优化：虽然 requestAnimationFrame 得到了广泛支持，但在一些旧浏览器中可能不支持。可以使用 setTimeout 来模拟 requestAnimationFrame 的功能，不过这种方式可能会导致动画效果不够流畅。例如：
function polyfillRequestAnimationFrame(callback) {
  return setTimeout(callback, 16);
}

然后在代码中使用 polyfillRequestAnimationFrame 替代 requestAnimationFrame，以确保在不支持 requestAnimationFrame 的浏览器中也能实现类似的效果。

处理锚点滚动时的特殊情况

动态加载内容的锚点滚动

当页面中有动态加载的内容时，处理锚点滚动需要特别注意。例如，使用 AJAX 加载新的内容后，锚点可能无法正常工作。这是因为在新内容加载完成之前，浏览器并不知道新的锚点位置。

解决方法是在新内容加载完成后，重新绑定锚点滚动事件或更新相关的 DOM 元素引用。假设使用 jQuery 进行 AJAX 加载：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF - 8">
  <title>动态加载内容的锚点滚动</title>
  <script src="https://code.jquery.com/jquery - 3.6.0.min.js"></script>
</head>

<body>
  <div id="mainContent"></div>
  <a href="#newSection" id="scrollLink">跳转到新节</a>

  <script>
    $(document).ready(() => {
      $.ajax({
        url: 'newContent.html',
        success: (data) => {
          $('#mainContent').html(data);
          const newSection = $('#newSection');
          if (newSection.length > 0) {
            $('#scrollLink').on('click', () => {
              newSection.scrollIntoView({ behavior:'smooth', block:'start' });
            });
          }
        }
      });
    });
  </script>
</body>

</html>

在这个例子中，通过 AJAX 从 newContent.html 加载新内容，并将其插入到 id 为 mainContent 的元素中。然后检查新内容中是否存在 id 为 newSection 的元素，如果存在，则为 scrollLink 绑定点击事件，使其能够平滑滚动到 newSection。

锚点滚动与页面布局变化

当页面布局发生变化时，例如响应式布局切换或元素动态显示/隐藏，锚点滚动可能会出现偏差。这是因为元素的位置和尺寸可能发生了改变。

为了避免这种情况，可以在页面布局变化事件（如 window.resize 或相关的 CSS 媒体查询触发事件）中重新计算锚点位置，并更新滚动逻辑。例如，当窗口大小改变时，重新设置平滑滚动的目标位置：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF - 8">
  <title>锚点滚动与页面布局变化</title>
</head>

<body>
  <div id="section1" style="height:1000px;background-color:lightblue;">第一节</div>
  <div id="section2" style="height:1000px;background-color:lightgreen;">第二节</div>
  <button onclick="smoothScrollToSection2()">平滑跳转到第二节</button>

  <script>
    let section2Top;

    function updateSection2Top() {
      section2Top = document.getElementById('section2').offsetTop;
    }

    function smoothScrollToSection2() {
      const start = window.pageYOffset;
      const end = section2Top;
      const distance = end - start;
      let startTime = null;

      const easeInOutQuad = (t, b, c, d) => {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
      };

      const step = (timestamp) => {
        if (!startTime) startTime = timestamp;
        const elapsed = timestamp - startTime;
        const progress = Math.min(elapsed / 1000, 1);
        window.scrollTo(0, easeInOutQuad(progress, start, distance, 1000));
        if (elapsed < 1000) {
          requestAnimationFrame(step);
        }
      };

      requestAnimationFrame(step);
    }

    window.addEventListener('resize', updateSection2Top);
    updateSection2Top();
  </script>
</body>

</html>

在这个例子中，定义了 updateSection2Top 函数来更新 section2 的顶部位置。在页面加载时调用一次 updateSection2Top，并且在 window.resize 事件中也调用该函数，以确保在窗口大小变化时，平滑滚动的目标位置是准确的。

结合动画库实现复杂的锚点滚动效果

常用动画库介绍

  1. GSAP（GreenSock Animation Platform）：这是一个功能强大的 JavaScript 动画库，提供了丰富的动画控制选项，包括时间轴、缓动函数、动画暂停/播放/倒放等功能。它可以轻松实现复杂的动画效果，并且性能优化良好。
  2. Anime.js：Anime.js 是另一个流行的动画库，它以简洁的语法和良好的兼容性而受到开发者喜爱。它支持多种类型的动画，如数字动画、颜色动画、路径动画等，并且可以方便地与 DOM 元素结合。

使用 GSAP 实现锚点滚动动画

首先，需要引入 GSAP 库，可以通过 CDN 方式引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>

然后，实现一个基于 GSAP 的锚点滚动动画：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF - 8">
  <title>使用 GSAP 实现锚点滚动动画</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
</head>

<body>
  <div id="section1" style="height:1000px;background-color:lightblue;">第一节</div>
  <div id="section2" style="height:1000px;background-color:lightgreen;">第二节</div>
  <button onclick="scrollToSection2WithGSAP()">使用 GSAP 滚动到第二节</button>

  <script>
    function scrollToSection2WithGSAP() {
      const section2 = document.getElementById('section2');
      const start = window.pageYOffset;
      const end = section2.offsetTop;
      const distance = end - start;

      gsap.to(window, {
        scrollTo: {
          y: end,
          duration: 1,
          ease: 'power2.inOut'
        }
      });
    }
  </script>
</body>

</html>

在上述代码中，使用 gsap.to 方法来创建一个滚动动画。scrollTo 配置项指定了滚动的目标位置 y 为 section2 的顶部位置，duration 表示动画持续时间为 1 秒，ease 选择了 power2.inOut 缓动函数，使滚动效果更加平滑自然。

使用 Anime.js 实现锚点滚动动画

同样，先引入 Anime.js 库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

然后，实现基于 Anime.js 的锚点滚动动画：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF - 8">
  <title>使用 Anime.js 实现锚点滚动动画</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
</head>

<body>
  <div id="section1" style="height:1000px;background-color:lightblue;">第一节</div>
  <div id="section2" style="height:1000px;background-color:lightgreen;">第二节</div>
  <button onclick="scrollToSection2WithAnime()">使用 Anime.js 滚动到第二节</button>

  <script>
    function scrollToSection2WithAnime() {
      const section2 = document.getElementById('section2');
      const start = window.pageYOffset;
      const end = section2.offsetTop;

      anime({
        targets: window,
        scrollTop: end,
        duration: 1000,
        easing: 'easeInOutQuad'
      });
    }
  </script>
</body>

</html>

这里使用 anime 函数创建动画，targets 指定目标为 window，通过改变 scrollTop 属性来实现滚动，duration 设定动画时长为 1000 毫秒，easing 选择了 easeInOutQuad 缓动函数。

跨浏览器兼容性处理

不同浏览器的滚动差异

  1. 滚动属性差异：在获取页面滚动位置时，不同浏览器有不同的属性。在现代浏览器中，可以使用 window.pageXOffset 和 window.pageYOffset 获取滚动位置。但在一些旧版本的 Internet Explorer 中，需要使用 document.documentElement.scrollTop 或 document.body.scrollTop（标准模式和怪异模式下分别使用）。例如：
function getScrollY() {
  return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
}
  1. 平滑滚动兼容性：虽然 scrollIntoView 的 behavior:'smooth' 选项在大多数现代浏览器中得到支持，但在一些旧浏览器中不支持。如前文所述，可以使用 requestAnimationFrame 或 setTimeout 来模拟平滑滚动效果，以确保在不同浏览器中都能实现类似的体验。

检测浏览器兼容性的方法

  1. 特性检测：通过检查浏览器是否支持某个特性来决定使用何种代码。例如，检测 scrollIntoView 的 behavior 选项是否支持：
function canUseSmoothScroll() {
  return 'behavior' in document.documentElement.scrollIntoView;
}
  1. 用户代理检测：通过检查 navigator.userAgent 字符串来判断浏览器类型和版本。但这种方法不太可靠，因为用户代理字符串可以被伪造，并且不同版本的浏览器可能有不同的实现方式。例如：
function isIE() {
  return /MSIE|Trident/.test(navigator.userAgent);
}

在实际应用中，建议优先使用特性检测，只有在特性检测无法满足需求时，才考虑使用用户代理检测作为补充。

提供兼容性解决方案

  1. 针对滚动位置获取：使用前面提到的兼容性函数 getScrollY 来统一获取滚动位置，确保在不同浏览器中都能正确获取。
  2. 针对平滑滚动：结合特性检测和模拟平滑滚动的方法，例如：
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF - 8">
  <title>平滑滚动兼容性处理</title>
</head>

<body>
  <div id="section1" style="height:1000px;background-color:lightblue;">第一节</div>
  <div id="section2" style="height:1000px;background-color:lightgreen;">第二节</div>
  <button onclick="scrollToSection2()">滚动到第二节</button>

  <script>
    function getScrollY() {
      return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    }

    function smoothScrollTo(target, duration = 1000) {
      const start = getScrollY();
      const end = document.getElementById(target).offsetTop;
      const distance = end - start;
      let startTime = null;

      const easeInOutQuad = (t, b, c, d) => {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
      };

      const step = (timestamp) => {
        if (!startTime) startTime = timestamp;
        const elapsed = timestamp - startTime;
        const progress = Math.min(elapsed / duration, 1);
        window.scrollTo(0, easeInOutQuad(progress, start, distance, duration));
        if (elapsed < duration) {
          requestAnimationFrame(step);
        }
      };

      requestAnimationFrame(step);
    }

    function scrollToSection2() {
      if ('behavior' in document.documentElement.scrollIntoView) {
        document.getElementById('section2').scrollIntoView({ behavior:'smooth', block:'start' });
      } else {
        smoothScrollTo('section2');
      }
    }
  </script>
</body>

</html>

在这个例子中，scrollToSection2 函数首先检测浏览器是否支持 scrollIntoView 的平滑滚动特性。如果支持，则直接使用该特性；如果不支持，则调用自定义的 smoothScrollTo 函数来实现平滑滚动，从而提供了跨浏览器的兼容性解决方案。

与其他功能的结合应用

锚点滚动与导航栏交互

在单页应用中，导航栏与锚点滚动经常结合使用。当用户点击导航栏的菜单项时，页面平滑滚动到相应的内容区域。例如：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF - 8">
  <title>锚点滚动与导航栏交互</title>
  <style>
    nav {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: #333;
      color: white;
      padding: 10px;
    }

    nav a {
      color: white;
      text-decoration: none;
      margin: 0 15px;
    }
  </style>
</head>

<body>
  <nav>
    <a href="#" onclick="scrollToSection('section1')">首页</a>
    <a href="#" onclick="scrollToSection('section2')">关于我们</a>
    <a href="#" onclick="scrollToSection('section3')">产品介绍</a>
  </nav>
  <div id="section1" style="height:1000px;background-color:lightblue;">首页内容</div>
  <div id="section2" style="height:1000px;background-color:lightgreen;">关于我们内容</div>
  <div id="section3" style="height:1000px;background-color:lightyellow;">产品介绍内容</div>

  <script>
    function smoothScrollTo(target, duration = 1000) {
      const start = window.pageYOffset;
      const end = document.getElementById(target).offsetTop;
      const distance = end - start;
      let startTime = null;

      const easeInOutQuad = (t, b, c, d) => {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
      };

      const step = (timestamp) => {
        if (!startTime) startTime = timestamp;
        const elapsed = timestamp - startTime;
        const progress = Math.min(elapsed / duration, 1);
        window.scrollTo(0, easeInOutQuad(progress, start, distance, duration));
        if (elapsed < duration) {
          requestAnimationFrame(step);
        }
      };

      requestAnimationFrame(step);
    }

    function scrollToSection(sectionId) {
      smoothScrollTo(sectionId);
    }
  </script>
</body>

</html>

在这个例子中，导航栏的每个链接点击时调用 scrollToSection 函数，该函数通过 smoothScrollTo 函数实现平滑滚动到相应的 section 区域，实现了导航栏与锚点滚动的良好交互。

锚点滚动与页面动画效果结合

可以在锚点滚动的同时，为目标元素或其他相关元素添加动画效果，以增强用户体验。例如，当滚动到某个 section 时，该 section 内的元素以淡入的动画效果显示：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF - 8">
  <title>锚点滚动与页面动画效果结合</title>
  <style>
   .hidden {
      opacity: 0;
    }
  </style>
</head>

<body>
  <div id="section1" style="height:1000px;background-color:lightblue;">第一节</div>
  <div id="section2" style="height:1000px;background-color:lightgreen;">
    <div class="hidden" id="element1">这是要淡入的元素 1</div>
    <div class="hidden" id="element2">这是要淡入的元素 2</div>
  </div>
  <button onclick="scrollToSection2()">滚动到第二节</button>

  <script>
    function smoothScrollTo(target, duration = 1000) {
      const start = window.pageYOffset;
      const end = document.getElementById(target).offsetTop;
      const distance = end - start;
      let startTime = null;

      const easeInOutQuad = (t, b, c, d) => {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
      };

      const step = (timestamp) => {
        if (!startTime) startTime = timestamp;
        const elapsed = timestamp - startTime;
        const progress = Math.min(elapsed / duration, 1);
        window.scrollTo(0, easeInOutQuad(progress, start, distance, duration));
        if (elapsed < duration) {
          requestAnimationFrame(step);
        } else {
          const elements = document.querySelectorAll('#section2.hidden');
          elements.forEach((element) => {
            element.classList.remove('hidden');
          });
        }
      };

      requestAnimationFrame(step);
    }

    function scrollToSection2() {
      smoothScrollTo('section2');
    }
  </script>
</body>

</html>

在这个例子中，当平滑滚动到 section2 时，检查 section2 内具有 hidden 类的元素，并移除该类，从而实现元素的淡入效果，将锚点滚动与页面动画效果很好地结合起来。