如何使用CSS :target实现单页应用中楼层导航的平滑滚动高亮？-css教程-PHP中文网

:target 无法在 spa 中直接实现楼层导航高亮，因框架用 pushstate 不触发 hash 变化，需确保 url 真正更新、dom 已挂载、id 合法且 html 设置 scroll-behavior: smooth。

如何使用css :target实现单页应用中楼层导航的平滑滚动高亮？

:target 本身不能直接实现单页应用（SPA）中的楼层导航高亮，因为 React/Vue 等框架默认用 pushState 改 URL，不触发原生 hash 导航，:target 就不会激活。

为什么点击导航没高亮、也没平滑滚动？

根本不是 CSS 写错了，而是框架路由没真正更新 location.hash —— 比如调用 router.push("/#about") 后，window.location.hash 仍是空字符串，:target 完全收不到信号。同时，scroll-behavior: smooth 必须写在 html 上才生效，写在 body 或 section 上无效。

检查浏览器地址栏：点击导航后，URL 是否真的变成 https://site.com/#about？如果不是，:target 不可能匹配
打开开发者工具 → Elements → 找到 <section id="about"></section>，手动在控制台执行 window.location.hash = "#about"，看样式是否立刻生效
确认 CSS 中有 html { scroll-behavior: smooth; }，且没有被其他规则覆盖（可用 computed 样式验证）

如何让 :target 在 React/Vue 里真正工作？

最轻量的做法是绕过框架路由，直接操作 hash；若必须用 pushState，就得补 JS 兜底。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

导航链接改用原生 @#@#@#@#@#@#@#@#@#@0，点击时触发浏览器原生 hash 跳转 → 自动激活 :target + 平滑滚动
如果要用 useNavigate 或 this.$router.push，必须显式设置 hash：navigate("/#about", { replace: true })，再加一句 window.location.hash = "#about"
目标元素需已挂载：若 id="about" 的 <section></section> 在 useEffect 或 onMounted 里才渲染，而 hash 已存在，:target 会错过 —— 应确保 DOM 渲染完成后再设 hash，或用 setTimeout(() => { window.location.hash = "#about" }, 0) 微任务延迟

:target 高亮动画怎么写才不卡顿？

:target 是瞬时状态，不能靠 transition 过渡，必须用 @keyframes；且动画属性选错会触发重排，尤其在移动端明显卡顿。

别写 section:target { transition: background-color 0.3s; } —— 没初始态，过渡无效

正确写法是提前定义基础样式，再用动画：

section {
  transition: transform 0.3s, opacity 0.3s;
}
section:target {
  animation: highlight 0.4s ease-out;
}
@keyframes highlight {
  0% { transform: scale(0.98); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

避免对 height、margin、padding 动画；iOS Safari 对 transform + opacity 兼容性最好
动画时间控制在 0.3s–0.45s，超过 0.5s 用户会觉得响应滞后

导航项高亮为什么总对不上？

:target 只作用于被跳转到的 id 元素（比如 <section id="about"></section>），**不是**作用于导航链接本身。想让对应 <a></a> 高亮，CSS 无法“反向选择”，必须结构配合或 JS 补位。

纯 CSS 方案：把导航项和目标区块包进同一容器，例如 <div>@#@#@#@#@#@#@#@#@#@0<section id="about"></section> </div>，再写 section:target ~ a 或 section:target + a
更可靠方案：监听 hashchange 事件，用 JS 给对应 <a href="#about"></a> 添加 active 类 —— 不依赖 DOM 顺序，支持默认高亮，兼容前进/后退
ID 值必须合法：id="user.profile" 中的点号会让 :target 失效，应改为 id="user-profile"