需用JS监听hashchange，在滚动完成后添加一次性高亮动画class：先setTimeout(fn,0)等待滚动结束，再querySelector目标元素并添加带@keyframes的唯一class（如含时间戳），动画用box-shadow实现闪烁效果，结束后立即remove。
hash跳转后怎么让目标元素立刻高亮
浏览器原生 hash 跳转不会触发任何样式变化，window.location.hash 更新后，滚动完成、DOM 已就位，但你没法靠 CSS :target 自动加动画——因为 :target 本身不支持 transition 或 animation 触发。
必须用 JS 捕获 hashchange 或在页面加载后手动触发一次高亮逻辑。
- 监听
hashchange事件，拿到location.hash后用document.querySelector()找对应元素 - 别依赖
DOMContentLoaded单次执行——用户可能点链接、前进/后退、手动改地址栏，都得响应 - 记得检查元素是否存在，
querySelector可能返回null，避免.classList.add()报错
用 CSS 动画实现“闪烁”效果而不是简单变色
单纯加个 background-color 不够醒目，用户可能没注意到滚动停在哪。真正有效的“瞬间高亮”需要视觉暂留感：比如淡入 + 背景闪黄 + 0.3 秒后自动淡出。
关键不是加 class，而是加一个带 @keyframes 的一次性动画 class，且必须确保每次触发都是“新动画”，否则浏览器会跳过重复播放。
立即学习“前端免费学习笔记（深入）”；
- 动画 class 名要唯一（比如拼上时间戳或随机数），或每次添加前先
remove再add - 动画结束后立即
remove该 class，避免干扰后续样式或重绘 - 推荐用
outline或box-shadow闪，比改background-color更不影响原有布局
@keyframes highlight {
0% { box-shadow: 0 0 0 4px #ffeb3b; }
50% { box-shadow: 0 0 0 8px rgba(255, 235, 59, 0.6); }
100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
为什么 setTimeout(fn, 0) 经常被用来“等滚动结束”
hash 跳转后，scrollIntoView 或浏览器自动滚动是异步的，立刻查 getBoundingClientRect() 可能还是旧位置。但你不该监听 scroll 事件做防抖——太重，也容易漏掉。
setTimeout 是最轻量的“让出主线程，等浏览器做完滚动渲染”的方式。现代浏览器中，0ms 并不真等 0ms，而是排到当前任务队列末尾，刚好卡在滚动完成之后。
- 不要用
requestAnimationFrame——它在重绘前执行，此时滚动可能还没到位 - 别设成
10或100，数字越大越不可控；0就够，语义清晰 - 如果页面有复杂滚动逻辑（如自定义 smooth scroll），就得换方案：监听
scrollend（Chrome 113+）或 fallback 到scroll+setTimeout防抖
兼容性与性能要注意的细节
老浏览器（IE、旧版 Safari）不支持 scrollend、element.scrollIntoView({ behavior: 'smooth' })，也不支持 animationend 事件在某些情况下触发。但高亮闪烁本身对兼容性要求不高——只要 class 能加、动画能播就行。
- 动画用
opacity或transform最安全，避免触发布局重排（reflow） - 别在高亮逻辑里调用
getComputedStyle或遍历大量节点，hashchange 频繁时会卡顿 - 移动端 Safari 对 hashchange 响应有时延迟，可加一层
location.hash !== oldHash手动比对，避免重复执行
