最简解法是给 html 元素添加 scroll-behavior: smooth;，它作用于所有原生锚点跳转，无需 js；:target 仅用于样式匹配，不控制滚动动画。
点击链接后页面跳转生硬，怎么加平滑滚动效果
直接给 html 或 body 加 scroll-behavior: smooth 就行，这是最简解法。它作用于所有原生跳转（包括 <a href="#section"></a> 这类页面内锚点），不需要 JS 干预，也不依赖 :target 伪类本身。
为什么 :target 伪类本身不控制滚动动画
:target 只是匹配当前 URL hash 对应的元素，用于样式高亮（比如加背景色、放大字体），它不触发、也不影响滚动行为。常见误解是以为给 :target 加 transition 能带动画滚动——不行，CSS 过渡对 scroll-behavior 无影响，对滚动位置本身也无效。
scroll-behavior 的兼容性与生效条件
这个属性在现代浏览器中支持良好（Chrome 61+、Firefox 68+、Safari 15.4+、Edge 79+），但有几点必须注意：
-
scroll-behavior必须写在可滚动的容器上；对整个页面生效，就写在html上（body在多数情况下不被当作滚动容器） - 如果父容器设置了
overflow: hidden或overflow: auto且内容溢出，那scroll-behavior需要加在该容器上，而不是html - 使用
window.scrollTo()等 JS 滚动方法时，需显式传入{ behavior: 'smooth' }，否则不受 CSS 控制
示例：
html {
scroll-behavior: smooth;
}
遇到平滑滚动失效的几个典型原因
不是所有“点了没反应”都怪 CSS。排查顺序建议如下：
- 检查是否写了
html { scroll-behavior: smooth; }，而不是只写在body或某个div上 - 确认链接的
href是有效的页面内 ID（如#about），且目标元素存在且有对应id属性，不是仅靠class或其他选择器 - 某些 CSS 重置库（如 normalize.css）或框架可能覆盖了
html的默认滚动行为，加!important测试是否恢复（仅调试用） - Safari 旧版本（scrollIntoView({ behavior: 'smooth' }) + 事件监听补全
真正需要 :target 的地方，只是视觉反馈——比如让锚点目标区域有个淡入或边框提示，和滚动动画无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
