如何实现网站点击按钮跳转至下一页的smoothscroll平滑滚动效果？

核心实现步骤 #

• 修正锚点链接：把你<a>标签里的href="Link here"改成目标<div>的id值，比如目标div的id是more-info-area，那href就写#more-info-area，注意id要完全匹配（大小写敏感）。
  示例HTML：

  <!-- 目标锚点区域 -->
  <div id="more-info-area"></div>
  
  <!-- 触发滚动的按钮 -->
  <a href="#more-info-area"><button type="button"><span></span>More info</button></a>
  

• 确保CSS属性生效：把scroll-behavior: smooth;加到html选择器里（比加在body上更可靠，部分浏览器仅识别html的该属性）。
  示例CSS：

  html {
    scroll-behavior: smooth;
  }
  
  /* 可选补充：给body也加上，避免特殊场景失效 */
  body {
    scroll-behavior: smooth;
    margin: 0; /* 清除默认边距，防止滚动位置偏移 */
  }
  

常见问题排查 #

• 如果滚动仍不平滑，检查是否有其他JS代码阻止了锚点的默认跳转行为（比如给a标签绑定了preventDefault()却没处理滚动逻辑）。
• 若页面有固定顶部的导航栏，滚动后目标区域会被导航栏遮挡，可给目标div添加scroll-margin-top调整位置：

  #more-info-area {
    scroll-margin-top: 70px; /* 数值等于导航栏的高度 */
  }
  

旧浏览器兼容方案（可选） #

如果要兼容IE这类不支持scroll-behavior的浏览器，可改用JS实现：

// 给触发按钮的a标签绑定点击事件
document.querySelector('a[href="#more-info-area"]').addEventListener('click', function(e) {
  e.preventDefault();
  const target = document.getElementById('more-info-area');
  target.scrollIntoView({
    behavior: 'smooth',
    block: 'start'
  });
});

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