如何解决WordPress Divi主题锚点链接失效问题

问题详情 #

设置Divi锚点链接后，点击链接仅将页面滚动至顶部，无法定位到预设的指定区块。

运行环境 #

• WordPress：v6.3
• Divi：v3.0.21

排查修复方案 #

1. 校验锚点ID一致性
   检查目标区块的CSS ID：在Divi模块的「高级」面板中，确认「CSS ID」字段的锚点名称无空格、特殊字符，且与链接中的锚点值（如#contact-section）完全匹配，大小写也需一致。

2. 解决平滑滚动冲突
   Divi自带的平滑滚动功能可能干扰锚点定位，可通过以下方式禁用：

   • CSS方式：在「外观 > 自定义 > 附加CSS」中添加代码：

     html {
       scroll-behavior: auto !important;
     }
     

   • PHP方式：在子主题的functions.php中添加代码：

     add_action('wp_enqueue_scripts', 'disable_divi_smooth_scroll', 100);
     function disable_divi_smooth_scroll() {
         wp_dequeue_script('divi-smooth-scroll');
     }
     

3. 排查插件JS冲突
   暂时禁用所有非Divi官方插件，测试锚点是否恢复正常。若正常，逐个启用插件，定位引发冲突的插件后，尝试更新插件或替换同类功能插件。

4. 更新Divi至最新版
   当前使用的Divi v3.0.21版本较老旧，存在已知的锚点兼容性问题。建议更新到最新稳定版本，更新前务必备份网站文件与数据库。

5. 修正锚点链接格式
   确保锚点链接格式正确：同一页面内跳转直接使用#锚点ID；跨页面跳转需完整书写为域名/页面路径/#锚点ID，避免相对路径错误导致定位失效。

内容的提问来源于stack exchange，提问作者Haroon