CSS:target实现锚点滚动效果详解

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《CSS :target 与滚动行为结合应用》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

使用 :target 伪类结合 scroll-behavior 可实现点击链接后平滑滚动并高亮目标元素，适用于锚点导航。通过设置 html { scroll-behavior: smooth; } 实现平滑滚动，:target 匹配 URL 中 fragment 对应元素，应用背景色、过渡效果等样式以提示当前激活区域。示例中点击带 #id 的链接，页面平滑滚动至对应 section，并通过 background-color 和 transition 实现视觉反馈。需确保元素 ID 唯一，避免性能影响，测试移动端兼容性，必要时用 JavaScript 监听 hashchange 事件微调滚动位置。合理运用可提升单页或文档类页面的导航体验。

当使用 CSS 的 :target 伪类与页面滚动行为结合时，可以实现点击链接后高亮或平滑展示目标元素的效果。这种组合常用于单页应用、文档锚点导航或内容展开场景中，提升用户体验。

:target 伪类的作用

:target 是一种 CSS 伪类，用于匹配当前 URL 中 fragment identifier（即 # 后面的部分）所指向的元素。

例如，当浏览器地址栏为 example.html#section1 时，ID 为 section1 的元素就会被 :target 选中，从而应用对应的样式。

常见用法包括：

• 改变目标元素的背景色
• 调整边框或阴影以突出显示
• 控制显示/隐藏（配合 opacity 或 height）

scroll 行为控制滚动方式

通过 CSS 的 scroll-behavior 属性，可以让页面滚动更平滑，避免生硬跳转。

在根元素或 body 上设置：

这样，无论是用户点击锚点链接还是脚本触发滚动，都会以动画形式完成。

结合 :target 使用时，用户点击带有 #id 的链接，页面会平滑滚动到对应元素位置，并且该元素可被 :target 定义的样式高亮。

实际应用示例

以下是一个简单但实用的例子：

点击链接后，页面平滑滚动到对应区域，同时背景变黄提示当前激活节。

注意事项与优化建议

使用 :target 和 scroll 行为时需注意以下几点：

• 确保每个目标元素有唯一 ID，否则 :target 不生效
• transition 可增强视觉反馈，但不要过度影响性能
• 移动端需测试滚动行为是否一致，某些旧版本浏览器不支持 smooth 滚动
• 若需更精细控制（如偏移定位），可用 JavaScript 监听 hashchange 事件并手动调整 scrollTop

基本上就这些。合理使用 :target 和 scroll-behavior，能让页面导航更自然直观，不复杂但容易忽略细节。}

好了，本文到此结束，带大家了解了《CSS:target实现锚点滚动效果详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！