如何在Safari中使用scroll-behavior:smooth实现平滑滚动？

Safari（包括桌面端和移动端）目前不支持CSS的scroll-behavior: smooth属性，所以纯CSS方案无法在Safari实现平滑滚动，需要用JavaScript做兼容处理，以下是具体方案：

方案一：给返回顶部按钮绑定JS平滑滚动事件 #

如果你的返回顶部按钮是通过点击触发跳转，直接给按钮添加点击事件，用window.scrollTo实现平滑滚动：

// 获取返回顶部按钮
const backToTopBtn = document.querySelector('.back-to-top');

backToTopBtn.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认跳转行为（若按钮是锚点链接需加这行）
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

方案二：兼容锚点链接的平滑滚动 #

如果返回顶部是用锚点链接（比如<a href="#top">返回顶部</a>），需要拦截默认锚点跳转，改用scrollIntoView实现：

// 监听所有锚点链接点击事件
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const targetId = this.getAttribute('href');
    const targetElement = document.querySelector(targetId);
    if (targetElement) {
      targetElement.scrollIntoView({
        behavior: 'smooth'
      });
    }
  });
});

可选：特性检测实现优雅降级 #

为了让支持scroll-behavior的浏览器继续使用CSS方案，仅在不支持的浏览器加载JS逻辑，可以加入特性检测：

// 检测浏览器是否支持scroll-behavior
if (!('scrollBehavior' in document.documentElement.style)) {
  const backToTopBtn = document.querySelector('.back-to-top');
  backToTopBtn.addEventListener('click', function(e) {
    e.preventDefault();
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
}

说明：window.scrollTo和Element.scrollIntoView的behavior: 'smooth'参数是Safari支持的，能稳定实现平滑滚动效果。

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