HTML5视频元素不支持name锚点定位，应将id设在父级块容器上并用scroll-margin-top处理固定导航栏遮挡，自动播放需通过hashchange事件监听实现。
HTML5 视频元素本身不支持 name 锚点定位
直接给 <video></video> 标签加 name="intro"，然后用 <a href="#intro"></a> 点击跳转——这在任何现代浏览器里都无效。HTML5 已彻底废弃 name 用于锚点的用法，<video></video> 也不是可滚动容器，它没有“位置”可供原生锚点滚动到。
常见错误现象：
• 页面 URL 变成了 #myvideo，但页面没滚动、视频也没播放
• 控制台无报错，但行为完全静默
• 误以为是 CSS 或 JS 阻止了默认行为，其实根本没触发锚点机制
- 锚点定位只作用于「文档流中的块级元素」，且依赖浏览器的滚动容器（如
或带overflow: auto的父容器） -
<video></video>默认是内联替换元素，即使设了display: block，它本身也不提供锚点滚动目标 - 真正能被锚点滚动到的，必须是带
id的、有渲染高度/位置的元素（比如包裹它的<section id="myvideo-section"></section>）
正确做法：用 id 定位视频容器，而非视频标签本身
把 id 放在 <video></video> 的父级块容器上，例如：
<section id="intro-video">
<h2>开场视频</h2>
<video controls width="640">
<source src="intro.mp4" type="video/mp4">
</video>
</section>再配链接：<a href="#intro-video">跳转到开场视频</a>。这样点击后，浏览器会滚动使该 <section></section> 顶部对齐视口顶部。
立即学习“前端免费学习笔记（深入）”；
- 必须确保该容器有足够高度（哪怕只是
padding-top: 1rem），否则可能滚动后看不见内容 - 若页面有固定头部（
position: fixed），需额外处理偏移，否则视频会被遮挡（见下一条） - 不要给
<video></video>自己设id并指望锚点跳转到它——它没有语义上的「段落位置」，浏览器无法计算其滚动坐标
固定导航栏遮挡？优先用 scroll-margin-top，不是 JS
当点击 #intro-video 后，视频标题或控件被顶部导航栏盖住，这是最常被手动写 JS 修复的问题。但 HTML5 + CSS 已原生支持更简洁方案：
section[id] {
scroll-margin-top: 80px; /* 匹配你的 fixed 导航栏高度 */
}这个 CSS 属性告诉浏览器：“滚动到该元素时，让它距离视口顶部留出 80px 空隙”，无需监听 hashchange、不用 scrollIntoView()、不触发重排。
- 兼容性：Chrome 69+、Firefox 68+、Safari 15.4+、Edge 79+ —— 对 2026 年的项目已足够可靠
- 比 JS 方案更轻量，不阻塞主线程，且天然支持浏览器前进/后退、URL 直接访问等原生行为
- 如果导航栏高度动态变化（如响应式折叠），可改用 CSS 自定义属性：
scroll-margin-top: var(--navbar-height, 80px)
需要点击即播放？用 hashchange 监听 + play() 调用
纯锚点只能滚动，不能控制视频行为。若希望用户点击链接后不仅滚动到视频区域，还自动播放（需用户交互前提），得用 JS：
function handleHashChange() {
if (location.hash === '#intro-video') {
const video = document.querySelector('#intro-video video');
if (video) video.play().catch(e => console.warn('自动播放被阻止:', e));
}
}
window.addEventListener('hashchange', handleHashChange);
handleHashChange(); // 初始化检查一次- 注意：现代浏览器禁止无用户手势的自动播放（尤其含声音），
play()可能抛出NotAllowedError，需兜底处理 - 不要在
DOMContentLoaded里直接调用play()，此时 hash 还未生效；hashchange是唯一可靠时机 - 若视频是静音的，成功率高很多：
<video muted autoplay></video>可绕过部分限制，但依然建议保留 JS 控制逻辑以备不时之需
固定头部遮挡和自动播放是两个独立问题，别混在一起解决；用 scroll-margin-top 处理滚动，用 hashchange 处理行为，边界清晰才不容易出 bug。
