Windows端Chrome/Edge平滑滚动无法到达锚点问题求助

问题现象 #

• 实现回到顶部按钮后，Windows端Chrome和Edge出现异常：平滑滚动有时会在到达锚点前中途停止
• 已在两台Windows设备复现该问题，Firefox、Safari及Mac端Chrome均表现正常

排查过程 #

• 测试验证：通过BrowserStack确认该现象存在
• 尝试方案：改用scrollTo()方法替代锚点跳转，问题仍未改善
• 参考排查：查阅相关平滑滚动异常案例，未找到完全匹配情况，怀疑与自身实现相关

复现代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    html {
      scroll-behavior: smooth;
    }
    .a {
      height: 5000px;
    }
    .b {
      position: fixed;
      right: 2rem;
      bottom: 2rem;
    }
  </style>
  <body>
    <div class="a" id="a">This is the top</div>
    <a class="b" href="#a">to the top</a>
  </body>
</html>

解决方案建议 #

方案1：禁用原生scroll-behavior，手动实现JS平滑滚动 #

放弃依赖浏览器原生的scroll-behavior，通过JS控制滚动动画，规避原生实现的bug：

const backToTopBtn = document.querySelector('.b');
backToTopBtn.addEventListener('click', function(e) {
  e.preventDefault();
  const scrollToTop = () => {
    const currentScroll = window.pageYOffset;
    if (currentScroll > 0) {
      window.requestAnimationFrame(scrollToTop);
      // 调整步长控制滚动减速效果
      window.scrollTo(0, currentScroll - currentScroll / 5);
    }
  };
  scrollToTop();
});

方案2：针对特定浏览器做兼容处理 #

通过UA判断Windows端Chrome/Edge，对这类浏览器禁用原生平滑滚动，改用JS实现：

const isWinChromeEdge = /Windows/.test(navigator.userAgent) && 
                        /Chrome|Edg/.test(navigator.userAgent);

if (isWinChromeEdge) {
  document.documentElement.style.scrollBehavior = 'auto';
  const backToTopBtn = document.querySelector('.b');
  backToTopBtn.addEventListener('click', function(e) {
    e.preventDefault();
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
}

方案3：排查页面布局冲突 #

页面中的固定定位元素、嵌套滚动容器可能干扰原生平滑滚动，可尝试：

• 检查是否有其他元素监听scroll事件并阻止默认行为
• 确认页面中不存在overflow: hidden或自定义滚动容器影响全局滚动

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