锚点跳转失效的常见原因包括：目标元素（如）未置于可滚动容器内、scroll-behavior: smooth未设置在具有overflow-y: auto和固定高度的父上、id位于中导致定位不准、浏览器对表格行锚点支持不稳定（尤其safari旧版），以及动态渲染时目标dom尚未挂载。
锚点跳转失效的常见原因
直接给 <table> 或 <code><tr> 加 <code>id 后点击链接没反应，大概率是元素没设置 scroll-behavior: smooth 的生效前提——它只对可滚动容器起作用，而默认 <table> 不产生滚动条。更关键的是：浏览器不会自动把 <code><tr> 当作可滚动目标，除非它在某个设置了 <code>overflow: auto/scroll 的父容器内。
必须包裹一个可滚动的容器
平滑跳转需要目标元素位于一个有明确滚动行为的容器中。不能直接对 <table> 设置 <code>scroll-behavior，而要把它放进一个带 overflow-y: auto 和 scroll-behavior: smooth 的 <div> 里：<pre class="brush:php;toolbar:false;"><div style="height: 400px; overflow-y: auto; scroll-behavior: smooth;">
<table><tbody>
<tr id="row-1"><td>第一行</td></tr>
<tr id="row-2"><td>第二行</td></tr>
<!-- 更多行 -->
</tbody></table>
</div></pre>
<ul><li>这个 <code><div> 必须有固定高度（或 max-height）+ <code>overflow-y: auto，否则不产生滚动条，scroll-behavior 无从触发
scroll-behavior: smooth 写在滚动容器上，不是写在 <table> 或 <code><a></a> 上id（如 row-2）必须落在该容器内部，且不能是 <thead> 中的 <code><tr>（部分浏览器对表头定位不准）<h3>链接写法与兼容性注意点</h3>
<p>使用标准锚点链接即可，但要注意两点：</p>
<ul>
<li>链接 href 必须是 <code>#row-2 这种完整 ID 引用，不能是 javascript:void(0) + 手动 scrollIntoView<tr> 锚点支持不稳定，建议加一行 <code>scroll-margin-top: 20px 避免目标被顶部遮挡<div id="row-2"> 包裹整行内容（放在 <code><td> 内），比直接挂 <code>id 到 <tr> 更可靠<h3>替代方案：scrollIntoView 更可控</h3>
<p>当锚点跳转在某些场景下表现异常（比如动态渲染后 ID 未注册、Safari 表格定位偏差），直接用 JS 调用 <code>scrollIntoView 更稳妥：
document.getElementById('row-2').scrollIntoView({
behavior: 'smooth',
block: 'center'
});
- 必须确保调用时目标元素已存在于 DOM 中（避免在
DOMContentLoaded前执行） -
block: 'center'比默认'start'更适合表格行居中显示 - 若表格是虚拟滚动或分页加载，需在数据渲染完成后再绑定或触发该方法
真正起作用的从来不是“给 table 加 smooth”，而是让目标在可滚动上下文中被正确定位——容器设置、ID 位置、浏览器限制，三者缺一不可。
