Blocksy 教程：实现锚点导航效果和菜单高亮

单页网站越来越流行，无需切换页面，所有信息集中在一个页面中展示。但页面内容变长后，访客很难快速跳转到某一特定区域。这时候，就可以使用锚点导航来提升浏览体验。

本文将介绍使用 Blocksy 主题 + Gutenberg 编辑器 实现页面锚点跳转的方法，并通过插件实现菜单高亮功能。

一、什么是锚点导航？

锚点导航是一种点击菜单后，页面平滑滚动到特定内容区域的技术，常用于：

• 单页网站（One Page Layout）
• 活动或产品落地页
• 长内容展示页（如服务流程、公司简介）

二、基础操作：快速实现锚点跳转

1. 创建页面与区块

在 Gutenberg 中创建一个新页面，添加多个内容区块用于模拟页面结构（如“关于我们”、“服务项目”、“联系我们”等）。

2. 设置锚点标识

点击每个标题或区块，右侧边栏 > 高级 > 填写 HTML Anchor 字段（例如：about-us、services）。

3. 创建导航菜单

前往后台：外观 > 菜单，执行以下操作：

• 创建一个新菜单

• 添加“自定义链接”，格式为 #锚点名称（如 #about-us）

• 命名链接标题（如“关于我们”）

• 保存并将菜单设为页眉导航

4. 测试页面跳转效果

访问前台页面，点击菜单项，页面将平滑跳转至对应内容区域。

三、进阶功能：实现菜单高亮效果

问题说明

WordPress 原生并不支持锚点菜单项的“当前项高亮”功能，用户滚动页面时，导航不会自动跟随。

解决方案：使用 Page scroll to id 插件

步骤 1：安装插件

前往后台：插件 > 安装插件
搜索并安装 Page scroll to id 插件，激活后启用

步骤 2：配置插件参数

进入插件设置页面，推荐配置如下：

• Highlighted class 设置为：ct-highlight（Blocksy 支持该样式类）

• 启用：
  • “只允许一个高亮菜单项”
  • “保持当前项高亮直到下一个出现”

保存设置。

四、最终效果验证

刷新前台页面进行测试：

• 点击导航菜单，页面平滑跳转至指定区域

• 滚动浏览时，当前所在的内容区块对应的菜单项自动高亮

这一功能特别适合打造高级感强、交互性高的单页网站或宣传页面。

五、总结

借助 Blocksy 和 Gutenberg 编辑器，结合 Page scroll to id 插件，可以轻松实现：

• 页面锚点跳转
• 自定义导航菜单链接
• 滚动高亮当前菜单项

无需任何代码，快速提升页面交互体验和专业感，非常适合服务介绍页、作品展示页或营销型着陆页使用。

最近更新

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息