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