CSS与JS实现平滑滚动效果详解

golang学习网今天将给大家带来《HTML实现平滑滚动效果的方法主要有两种：使用CSS的scroll-behavior属性，或者通过JavaScript控制滚动行为。以下是具体的实现方式：一、使用CSS实现平滑滚动（推荐）现代浏览器普遍支持CSS的scroll-behavior属性，可以轻松实现页面元素之间的平滑滚动。示例代码：html { scroll-behavior: smooth; }使用场景：当你点击锚点链接（如跳转到章节1）时，页面会自动平滑滚动到目标位置。二、使用JavaScript实现更精细的平滑滚动如果你需要更复杂的控制（比如自定义动画、延迟、回调函数等），可以使用JavaScript来实现。示例代码：document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); } }); });说明：scrollIntoView({ behavior: 'smooth' }) 是实现平滑滚动的核心方法。可以设置其他参数，例如 block: 'start' 或 block: 'end'》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

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

到这里，我们也就讲完了《CSS与JS实现平滑滚动效果详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！