开启您的高性能独立站项目
我会根据您真实的业务场景,帮您避开那些又贵又坑的劣质主机和臃肿主题,量身定制最合理的建站项目方案。
在我们搭建好网站,制作 WordPress 页面时,我们有时候我们会希望实现“点击按钮后自动跳到页面某一位置”的效果,例如:
点击“了解更多”自动跳到“关于我们”部分;
点击导航栏菜单直接跳到页面下方的服务介绍;
长页面中快速跳转到指定内容区域。
这种操作就是通过 锚点(Anchor Link) 实现的。
下面将分为两部分,分别介绍在 古腾堡编辑器 和 Elementor 编辑器 中如何设置锚点转跳。
打开你要编辑的页面(或文章)。
找到想要跳转到的区块,例如标题或段落。
选中该区块,在右侧设置栏中找到 “高级(Advanced)” 部分。
在“HTML 锚点”输入框中输入一个自定义名称,例如:
Website-Core
⚠️注意: 不要加 # 符号。
这就相当于为该部分创建了一个命名锚点。
在页面上添加一个按钮或文字链接。
在按钮的“链接”位置输入锚点地址,例如:
#Website-Core
3.更新或发布页面后,点击该按钮,就会自动跳转到你设置的锚点部分。
锚点名称:Website-Core
跳转链接:#Website-Core
实现效果:点击“查看服务”按钮 → 页面自动滚动到“建站核心介绍”区块开始位置。
打开 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 中设置锚点,就像为页面的每个部分贴上“标签”,让访客一键直达想看的内容。