css修改平滑滚动效果

基础概念

CSS 平滑滚动效果是指通过 CSS 动画实现页面内容的平滑过渡，通常用于滚动条的滚动行为，使得用户在浏览网页时能够获得更加流畅的视觉体验。

类型

滚动条平滑滚动：改变滚动条的滚动行为，使其滚动时内容平滑过渡。
锚点平滑滚动：点击链接时，页面平滑滚动到指定位置。

应用场景

导航菜单：点击菜单项时，页面平滑滚动到对应内容区域。
图片轮播：在图片轮播组件中，实现图片切换时的平滑过渡效果。
长页面导航：在长页面中，通过平滑滚动提升用户体验。

实现方法

滚动条平滑滚动

html {
  scroll-behavior: smooth;
}

锚点平滑滚动

<a href="#section1" class="smooth-scroll">Go to Section 1</a>
<div id="section1">Section 1 Content</div>

.smooth-scroll {
  color: blue;
  text-decoration: none;
}

.smooth-scroll:hover {
  text-decoration: underline;
}

document.querySelectorAll('.smooth-scroll').forEach(link => {
  link.addEventListener('click', function (e) {
    if (this.hash !== "") {
      e.preventDefault();
      const hash = this.hash;
      window.scrollTo({
        top: document.querySelector(hash).offsetTop,
        behavior: 'smooth'
      });
    }
  });
});

可能遇到的问题及解决方法

问题：浏览器兼容性问题

原因：不同浏览器对 CSS 平滑滚动属性的支持程度不同。

解决方法：

html {
  scroll-behavior: smooth;
  -webkit-scroll-behavior: smooth; /* Safari 和 Chrome */
}

问题：JavaScript 动画卡顿

原因：JavaScript 动画在某些情况下可能会导致页面卡顿，尤其是在低性能设备上。

解决方法：

优化动画代码：减少不必要的计算和 DOM 操作。
使用 CSS 动画：CSS 动画通常比 JavaScript 动画更高效。
使用 requestAnimationFrame：在 JavaScript 中使用 requestAnimationFrame 来优化动画性能。

function smoothScroll(element, to, duration) {
  const start = window.pageYOffset;
  const change = to - start;
  let currentTime = 0;
  const increment = 20;

  function animateScroll() {
    currentTime += increment;
    const val = Math.easeInOutQuad(currentTime, start, change, duration);
    window.scrollTo(0, val);
    if (currentTime < duration) {
      setTimeout(animateScroll, increment);
    }
  }

  animateScroll();
}

Math.easeInOutQuad = function (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;
};