当前位置：首页 > 文章列表 > 文章 > 前端 > 超简单！手把手教你用HTML实现页面平滑滚动效果

超简单！手把手教你用HTML实现页面平滑滚动效果

2025-06-22 22:43:03 0浏览收藏

解决方案

实现平滑滚动主要有两种方式：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 缓动函数会产生一个类似弹跳的效果。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~