必须配合 scroll-behavior: smooth 才能实现平滑滚动；:target 仅匹配样式，不控制滚动，浏览器默认锚点跳转会瞬移到目标元素 offsetTop，导致闪跳或错位，该属性须作用于 html 或 body 元素。
能实现，但:target 本身不提供平滑滚动，必须配合 scroll-behavior: smooth 才行；否则点击锚链接只会“瞬移”到目标元素顶部，没有过渡效果。
为什么 :target 切换后页面会突然跳到顶部？
:target 只负责样式匹配（比如显示/提升 z-index），它不控制滚动行为。浏览器默认执行的是“锚点跳转”，即强制滚动到目标元素的 offsetTop，且无动画。这是原生行为，和 :target 是否生效无关。
- 即使你把所有
.tab_content设为position: absolute，只要<a href="#tab1"></a>触发了 URL 变化，浏览器仍会尝试滚动 - 如果目标元素在视口外，且没设
scroll-behavior，就会出现生硬的“闪跳” - 某些布局下（如
position: absolute+top: 0），跳转后可能根本看不到内容——因为元素被挤出可视区，但浏览器仍“认为”已滚动到位
必须加 scroll-behavior: smooth 才能平滑
这是唯一可控、标准化的 CSS 级滚动动画方案，不需要 JS，兼容 Chrome 61+、Firefox 68+、Safari 15.4+、Edge 79+。IE 完全不支持，但 IE 已淘汰，可忽略。
- 必须作用于
html或body元素，写在body上更稳妥（部分浏览器对html的 scroll-behavior 支持不稳定） - 示例：
html, body { scroll-behavior: smooth; } - 不能只写
div.tablist { scroll-behavior: smooth; }——该属性只对根滚动容器生效 - 如果页面已有 JS 控制滚动（比如
element.scrollIntoView({ behavior: 'smooth' })），两者会共存，但 CSS 方案更轻量、自动触发
:target + absolute 布局时的常见错位问题
用 position: absolute 实现 Tab 内容层叠时，:target 切换本身没问题，但 scroll-behavior: smooth 会试图滚动到绝对定位元素的原始文档位置（通常是顶部附近），导致视觉错位——内容明明在中间，却滚到空白处。
立即学习“前端免费学习笔记（深入）”；
- 解决办法：给每个 tab 内容容器加一个不可见的、带
id的空锚点，放在你想对齐的位置（比如导航栏下方） - 例如：
<div id="anchor-tab1" style="position: relative; top: -60px;"></div><div id="tab1" class="tab_content">...</div>
再让链接指向#anchor-tab1而非#tab1 - 或者直接放弃
absolute，改用display: none/block+transition: opacity，这样滚动位置自然跟随内容流，不会错乱 - 注意：若用
display: none，需确保默认状态是display: block的那个 tab 对应的元素在 HTML 中排最前，否则首次加载可能空白
真正难的不是写对 :target 选择器，而是协调滚动行为、定位方式和初始可见态三者之间的关系——稍有不慎，用户点击后要么看不到内容，要么滚到错误位置，要么动画卡顿。这些细节不调试几遍根本发现不了。
