HTML平滑滚动设置方法详解

想要实现网页的平滑滚动效果吗？本文为你详细解读如何通过HTML、CSS和JavaScript三种方式实现页面元素的平滑滚动。文章将介绍两种主要方法：一是利用CSS的`scroll-behavior`属性，代码简洁但兼容性稍逊；二是使用JavaScript的`window.scrollTo()`或`requestAnimationFrame()`方法，提供更强的自定义性和兼容性。同时，本文还提供了兼容旧版浏览器、指定容器内平滑滚动以及自定义滚动速度和缓动函数的实用技巧，助你轻松打造流畅的用户体验。无论你是前端新手还是经验丰富的开发者，都能从中找到适合你的解决方案。

实现页面平滑滚动主要有两种方式：1.CSS scroll-behavior，通过设置html或特定元素的scroll-behavior属性实现平滑滚动，优点是简单易用但兼容性较差且无法自定义动画细节；2.JavaScript实现，使用window.scrollTo()或requestAnimationFrame()方法，可灵活控制滚动速度和缓动函数，兼容性好但代码量较多；对于不支持scroll-behavior的浏览器可采用JavaScript方案作为备选，也可针对特定容器应用平滑滚动并修正偏移量；自定义滚动速度可通过修改duration参数实现，缓动函数则可通过替换easeInOutCubic等函数来调整效果。

页面平滑滚动，简单来说，就是让页面滚动的时候，不是“嗖”的一下跳到目标位置，而是有一个平滑过渡的动画效果。实现起来并不复杂，主要通过CSS和JavaScript来实现。

解决方案

实现平滑滚动主要有两种方式：CSS scroll-behavior 和 JavaScript。

1. CSS scroll-behavior

这是最简单的方式，只需要一行CSS代码：

html {
  scroll-behavior: smooth;
}

这行代码会使整个页面的所有锚点链接都具有平滑滚动效果。 如果想只对特定元素应用平滑滚动，可以将其应用到该元素上，比如：

.scrollable-area {
  scroll-behavior: smooth;
  overflow-y: auto; /* 确保元素可以滚动 */
}

优点：简单易用，代码量少。

缺点：兼容性略差，一些老版本的浏览器可能不支持。另外，无法自定义滚动动画的细节，例如滚动速度、缓动函数等。

2. JavaScript 实现

JavaScript 实现方式更加灵活，可以自定义滚动动画的各种参数。

a. 使用 window.scrollTo() 或 element.scrollTo()

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();

    const targetId = this.getAttribute('href').substring(1);
    const targetElement = document.getElementById(targetId);

    if (targetElement) {
      window.scrollTo({
        top: targetElement.offsetTop,
        behavior: 'smooth'
      });
    }
  });
});

这段代码会监听页面上所有以 # 开头的链接的点击事件，阻止默认跳转行为，然后使用 window.scrollTo() 方法滚动到目标元素的位置。 behavior: 'smooth' 指定了平滑滚动。

b. 使用 requestAnimationFrame() 实现更精细的动画控制

如果需要更精细的动画控制，例如自定义缓动函数，可以使用 requestAnimationFrame()。

function smoothScroll(element, target, duration) {
  let start = element.scrollTop;
  let change = target - start;
  let startTime = performance.now();

  function easeInOutCubic(t) {
    t /= duration / 2;
    if (t < 1) return change / 2 * t * t * t + start;
    t -= 2;
    return change / 2 * (t * t * t + 2) + start;
  }

  function animateScroll() {
    const currentTime = performance.now() - startTime;
    if (currentTime < duration) {
      element.scrollTop = easeInOutCubic(currentTime);
      requestAnimationFrame(animateScroll);
    } else {
      element.scrollTop = target;
    }
  }

  requestAnimationFrame(animateScroll);
}

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();

    const targetId = this.getAttribute('href').substring(1);
    const targetElement = document.getElementById(targetId);

    if (targetElement) {
      smoothScroll(document.documentElement || document.body, targetElement.offsetTop, 500); // 500ms 滚动时间
    }
  });
});

这个例子使用了 requestAnimationFrame() 和一个 easeInOutCubic 缓动函数来实现更平滑、更可控的滚动动画。 easeInOutCubic 是一种常用的缓动函数，可以产生先加速后减速的效果。

优点：兼容性好，可以自定义滚动动画的各种参数，灵活性高。

缺点：代码量相对较多，需要一定的 JavaScript 基础。

如何兼容不支持scroll-behavior的浏览器？

对于不支持 scroll-behavior 的老版本浏览器，可以采用 JavaScript 方案作为备选方案。检测浏览器是否支持 scroll-behavior，如果不支持，则使用 JavaScript 实现平滑滚动。

if ('scrollBehavior' in document.documentElement.style) {
  // 支持 scroll-behavior，使用 CSS 实现
  document.documentElement.style.scrollBehavior = 'smooth';
} else {
  // 不支持 scroll-behavior，使用 JavaScript 实现
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      e.preventDefault();

      const targetId = this.getAttribute('href').substring(1);
      const targetElement = document.getElementById(targetId);

      if (targetElement) {
        // 使用 JavaScript 实现平滑滚动 (上面的 JavaScript 代码)
        smoothScroll(document.documentElement || document.body, targetElement.offsetTop, 500);
      }
    });
  });
}

这样可以确保在所有浏览器上都能实现平滑滚动效果。

如何实现指定容器内的平滑滚动？

有时候，我们希望只对页面中的某个特定容器（例如一个 div）应用平滑滚动效果，而不是整个页面。 这时候，需要针对该容器进行设置。

CSS 方法：

.scrollable-container {
  height: 300px; /* 设置容器高度 */
  overflow-y: scroll; /* 允许垂直滚动 */
  scroll-behavior: smooth;
}

然后，容器内的锚点链接会自动平滑滚动。

JavaScript 方法：

修改 JavaScript 代码，将 window.scrollTo 替换为容器的 scrollTo 方法：

document.querySelectorAll('.scrollable-container a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();

    const targetId = this.getAttribute('href').substring(1);
    const targetElement = document.getElementById(targetId);

    if (targetElement && targetElement.parentNode.classList.contains('scrollable-container')) {
      document.querySelector('.scrollable-container').scrollTo({
        top: targetElement.offsetTop - targetElement.parentNode.offsetTop, // 修正偏移量
        behavior: 'smooth'
      });
    }
  });
});

注意，这里需要修正偏移量，因为目标元素相对于容器的 offsetTop 可能不是 0。

如何自定义滚动速度和缓动函数？

使用 CSS 的 scroll-behavior 无法自定义滚动速度和缓动函数。 需要使用 JavaScript 来实现。

在上面的 JavaScript 示例中，已经展示了如何使用 requestAnimationFrame() 和自定义缓动函数来实现更精细的动画控制。 可以修改 smoothScroll 函数的 duration 参数来调整滚动速度，修改 easeInOutCubic 函数来调整缓动效果。

例如，要将滚动速度减慢一倍，可以将 duration 参数设置为 1000 (单位是毫秒)。

要使用不同的缓动函数，可以替换 easeInOutCubic 函数。 有很多现成的缓动函数可以使用，例如 linear, easeInQuad, easeOutQuad, easeInOutQuad 等。 也可以自定义缓动函数，只要保证函数接受一个 0 到 1 之间的数值作为输入，并返回一个 0 到 1 之间的数值作为输出即可。

function easeOutBounce(x) {
  const n1 = 7.5625;
  const d1 = 2.75;

  if (x < 1 / d1) {
    return n1 * x * x;
  } else if (x < 2 / d1) {
    return n1 * (x -= (1.5 / d1)) * x + 0.75;
  } else if (x < 2.5 / d1) {
    return n1 * (x -= (2.25 / d1)) * x + 0.9375;
  } else {
    return n1 * (x -= (2.625 / d1)) * x + 0.984375;
  }
}

这个 easeOutBounce 缓动函数会产生一个类似弹跳的效果。

今天关于《HTML平滑滚动设置方法详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！