怎么在CSS3中利用:target实现平滑滚动的单页Tab切换？-css教程-PHP中文网

必须配合 scroll-behavior: smooth 才能实现平滑滚动；:target 仅匹配样式，不控制滚动，浏览器默认锚点跳转会瞬移到目标元素 offsetTop，导致闪跳或错位，该属性须作用于 html 或 body 元素。

怎么在css3中利用:target实现平滑滚动的单页tab切换？

能实现，但:target 本身不提供平滑滚动，必须配合 scroll-behavior: smooth 才行；否则点击锚链接只会“瞬移”到目标元素顶部，没有过渡效果。

:target 只负责样式匹配（比如显示/提升 z-index），它不控制滚动行为。浏览器默认执行的是“锚点跳转”，即强制滚动到目标元素的 offsetTop，且无动画。这是原生行为，和 :target 是否生效无关。

即使你把所有 .tab_content 设为 position: absolute，只要触发了 URL 变化，浏览器仍会尝试滚动
如果目标元素在视口外，且没设 scroll-behavior，就会出现生硬的“闪跳”
某些布局下（如 position: absolute + top: 0），跳转后可能根本看不到内容——因为元素被挤出可视区，但浏览器仍“认为”已滚动到位

这是唯一可控、标准化的 CSS 级滚动动画方案，不需要 JS，兼容 Chrome 61+、Firefox 68+、Safari 15.4+、Edge 79+。IE 完全不支持，但 IE 已淘汰，可忽略。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

必须作用于 html 或 body 元素，写在 body 上更稳妥（部分浏览器对 html 的 scroll-behavior 支持不稳定）
示例：
```
html, body { scroll-behavior: smooth; }
```
不能只写 div.tablist { scroll-behavior: smooth; }——该属性只对根滚动容器生效
如果页面已有 JS 控制滚动（比如 element.scrollIntoView({ behavior: 'smooth' })），两者会共存，但 CSS 方案更轻量、自动触发

用 position: absolute 实现 Tab 内容层叠时，:target 切换本身没问题，但 scroll-behavior: smooth 会试图滚动到绝对定位元素的原始文档位置（通常是顶部附近），导致视觉错位——内容明明在中间，却滚到空白处。

例如：

<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 中排最前，否则首次加载可能空白