聚焦页面内部结构与用户体验的专题指南
“In Page” 指的是在同一个网页内部进行内容组织、导航和交互的技术与设计方法。 它常用于长页面、产品介绍页、帮助文档或单页应用(SPA)中,通过锚点链接实现快速跳转, 提升用户浏览效率与体验。
锚点(Anchor)是 HTML 中通过 id 属性定义的页面位置标识。
用户点击带有 href="#section-id" 的链接时,浏览器会自动滚动到对应元素。
示例代码:
<a href="#examples">跳转到示例</a>
<section id="examples">...</section>
虽然 In Page 导航主要提升用户体验,但合理的语义化结构(如使用 <h1> 到 <h6>、
清晰的段落划分)也有助于搜索引擎理解页面内容。
同时,为每个锚点区域设置有意义的标题和描述,可增强页面在搜索结果中的相关性。
本页面即是一个完整的 In Page 示例:
#section-id,便于分享特定内容你可以尝试点击导航栏中的任意链接,观察页面行为。
scroll-behavior: smooth 实现平滑滚动