在我们搭建好网站，制作 WordPress 页面时，我们有时候我们会希望实现“点击按钮后自动跳到页面某一位置”的效果，例如：
-
点击“了解更多”自动跳到“关于我们”部分；
-
点击导航栏菜单直接跳到页面下方的服务介绍；
-
长页面中快速跳转到指定内容区域。
这种操作就是通过 锚点（Anchor Link） 实现的。
下面将分为两部分，分别介绍在 古腾堡编辑器 和 Elementor 编辑器 中如何设置锚点转跳。
步骤一：添加锚点位置（目标位置）
打开你要编辑的页面（或文章）。
找到想要跳转到的区块，例如标题或段落。
选中该区块，在右侧设置栏中找到 “高级（Advanced）” 部分。
在“HTML 锚点”输入框中输入一个自定义名称，例如：
Website-Core
⚠️注意： 不要加 # 符号。
这就相当于为该部分创建了一个命名锚点。
步骤二：创建跳转链接（触发位置）
在页面上添加一个按钮或文字链接。
在按钮的“链接”位置输入锚点地址，例如：
#Website-Core
3.更新或发布页面后，点击该按钮，就会自动跳转到你设置的锚点部分。
举例说明：
锚点名称：Website-Core
跳转链接：#Website-Core
实现效果：点击“查看服务”按钮 → 页面自动滚动到“建站核心介绍”区块开始位置。
Elementor 编辑器设置锚点跳转
步骤一：在页面中添加“菜单锚点”小工具
打开 Elementor 页面编辑器。
在左侧面板搜索 “锚点（Anchor）”。
3.将“菜单锚点”拖到你希望跳转到的区域（例如标题上方）。
4.在左侧设置面板中输入锚点名称（如 top）。
步骤二：设置跳转按钮或导航链接
选择一个按钮（或导航菜单中的链接）。
在链接输入框中输入：
#top
3.更新页面后，点击按钮即可平滑跳转到对应区域。
提示： 如果你的按钮位于其他页面，可以使用完整 URL，根据实际情况例如：
https://blog.ctzpj.com/#top
平滑滚动效果
Elementor 默认支持“平滑滚动”效果。
若未生效，可在 Elementor → 设置 → 高级 → “启用平滑滚动” 打开该选项。
常见问题与解决办法
| 问题 | 原因 | 解决方法 |
|---|---|---|
| 点击锚点无反应 | 锚点名与链接名不一致 | 检查是否大小写一致、无空格 |
| 跳转位置偏移 | 页眉（Header）固定遮挡 | 给锚点上方添加额外间距（Padding Top） |
| 不支持平滑滚动 | 浏览器或主题未启用该特效 | 可通过 CSS 添加平滑滚动代码 |
自定义CSS代码，启用全站平滑滚动效果，可用一下代码。
html {
scroll-behavior: smooth;
}
将此代码添加到“外观 → 自定义 → 额外 CSS”中，即可启用全站平滑滚动效果。
建议：
命名清晰：锚点名尽量短小、语义化，使用英文，如
about、contact、service。导航优化：可结合单页网站（One Page Site）设计，配合顶部菜单实现流畅导航。
测试移动端效果：确保手机和平板也能正常跳转。
避免重复锚点名：同一页面内的锚点名必须唯一。
总而言之无论使用古腾堡还是 Elementor，设置锚点跳转的核心思路都是：
先为目标位置添加锚点 → 再在触发按钮中链接该锚点。
通过这种方式，你可以轻松实现页面内的平滑转跳，提升用户体验与导航效率。
在 WordPress 中设置锚点，就像为页面的每个部分贴上“标签”，让访客一键直达想看的内容。
