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'
      });
    }
  });
});

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

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;
};