CSS scroll-behavior平滑滚动在Safari中如何实现？-css教程-PHP中文网

safari 中 scroll-behavior: smooth 默认不生效，应改用 scrollintoview({ behavior: 'smooth' }) 并配合 hashchange 事件监听与元素存在性校验，ios 15.4/macos 12.3 起已原生支持且行为一致。

css scroll-behavior平滑滚动在safari中如何实现？

scroll-behavior: smooth 在 Safari 中默认不生效

直接在 html 或 body 上设 scroll-behavior: smooth，Safari（包括最新版 macOS 和 iOS）仍会执行跳转式滚动，不是平滑的。这不是你写错了，是 Safari 对该 CSS 属性的支持长期停留在「部分实现」状态——它识别该声明但不触发实际动画。

用 JavaScript 的 scrollIntoView 替代 CSS 声明

这是目前最可靠、兼容性最好的方案。Safari 自 iOS 15.4 / macOS 12.3 起已完整支持 scrollIntoView 的 { behavior: 'smooth' } 选项，且行为与 Chrome/Firefox 一致。

必须指定目标元素，不能只靠锚点链接自动触发；需手动绑定点击事件
对 <a href="#section"></a> 这类原生链接，需 event.preventDefault() 阻止默认跳转
推荐用 document.getElementById('section') 或 document.querySelector('#section') 获取元素，避免 querySelector 返回 null 导致静默失败
若目标元素不可见（如被 display: none 或未渲染），scrollIntoView 会失效或报错，建议加存在性判断

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', e => {
    e.preventDefault();
    const targetId = anchor.getAttribute('href').slice(1);
    const targetEl = document.getElementById(targetId);
    if (targetEl) targetEl.scrollIntoView({ behavior: 'smooth' });
  });
});

锚点链接 + hashchange 时补救滚动

用户手动修改 URL hash（比如后退/前进、粘贴带 # 的链接），scrollIntoView 不会自动触发。需监听 hashchange 事件并主动滚动。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

仅在 hash 存在且对应元素存在时才调用 scrollIntoView，避免空滚动或报错
注意：首次加载页面时 hashchange 不触发，需在 DOM 加载完成后手动检查一次 window.location.hash
Safari 对 scrollIntoView 的偏移计算有时略保守（顶部留白偏多），可加 block: 'start' 显式控制对齐方式

function scrollToHash() {
  const hash = window.location.hash.slice(1);
  const el = document.getElementById(hash);
  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
window.addEventListener('hashchange', scrollToHash);
document.addEventListener('DOMContentLoaded', scrollToHash);