实现平滑滚动动画：按钮锚点跳转的平滑效果需求

方案一：CSS全局平滑滚动（最简单） #

直接给全局的html元素添加scroll-behavior: smooth样式，就能让所有锚点跳转自动带上平滑动画，不需要修改你现有的JavaScript代码：

html {
  scroll-behavior: smooth;
}

这种方式的优势是零JS改动，所有锚点导航（包括通过window.location.href跳转的情况）都会自动生效，现代浏览器都支持。

方案二：JavaScript精准控制（更灵活） #

如果不想全局启用平滑滚动，或者需要自定义滚动的位置、速度等细节，可以替换掉原来的跳转逻辑，使用scrollIntoView()方法实现：

const btn = document.getElementById('scroll');
btn.addEventListener('click', () => {
  // 先获取目标元素
  const target = document.getElementById('about');
  if (target) {
    target.scrollIntoView({
      behavior: 'smooth', // 开启平滑动画
      block: 'start' // 可选参数：控制元素滚动到视口的位置，可选值start/center/end/nearest
    });
  }
});

这种方式可以单独控制某个按钮的滚动行为，还能通过block参数调整滚动后目标元素在视口中的位置，比如设为center可以让元素居中显示。

注意事项 #

• 确保页面中存在id="about"的目标元素，否则代码不会执行任何操作
• CSS方案不兼容IE浏览器，如果需要兼容旧版浏览器，建议使用JavaScript方案

内容的提问来源于stack exchange，提问作者scope