Divi主题滚动导航菜单高亮异常：完整URL锚点失效排查

我明白你遇到的麻烦了——当菜单链接是带域名的完整URL（比如https://sample.com/#section-1）时，现有代码直接把整个URL当作jQuery选择器去查找元素，这肯定会报错，因为jQuery的ID选择器只认#section-1这种格式，完整URL会被判定为无效的选择器语法。

核心解决思路 #

1. 提取纯锚点部分：从每个链接的href中分离出#开头的锚点片段，不管前面的域名和路径，用浏览器原生的URL对象处理最可靠。
2. 修正匹配逻辑：后续查找页面区块、匹配菜单高亮的逻辑，都用提取后的纯锚点；但匹配菜单链接时仍保留完整URL，确保选中正确的菜单项。
3. 初始化触发高亮：页面加载时主动执行一次高亮检测，解决从其他页面跳转过来后菜单不自动高亮的问题。

修改后的完整代码 #

<script type="text/javascript">
(function($) {
 $(document).ready(function() {
 var navChildren = $("#top-menu li").children();
 var aArray = [];
 for (var i = 0; i < navChildren.length; i++) {
 var aChild = navChildren[i];
 var ahref = $(aChild).attr('href');
 // 用URL对象提取锚点，兼容纯锚点和完整URL两种格式
 var anchorHash = new URL(ahref, window.location.origin).hash;
 // 只存储有效的锚点数据，避免空值干扰
 if (anchorHash) {
 aArray.push({
 fullHref: ahref, // 保留完整URL用于匹配菜单链接
 anchor: anchorHash // 存储纯锚点用于查找页面区块
 });
 }
 }

 // 把高亮逻辑抽成独立函数，方便复用
 function updateActiveMenu() {
 var windowPos = $(window).scrollTop();

 aArray.forEach(function(item) {
 var targetSection = $(item.anchor);
 // 避免页面中不存在对应区块时报错
 if (!targetSection.length) return;

 var secPosition = targetSection.offset().top - 230;
 var secEndPosition = secPosition + targetSection.height() + 90;

 if (windowPos >= secPosition && windowPos < secEndPosition) {
 $("a[href='" + item.fullHref + "']").parent().addClass("current-item");
 } else {
 $("a[href='" + item.fullHref + "']").parent().removeClass("current-item");
 }
 });
 }

 // 滚动时触发高亮更新
 $(window).scroll(updateActiveMenu);

 // 页面加载完成后立刻执行一次，处理跳转过来的锚点
 updateActiveMenu();
 });
})(jQuery);
</script>

关键修改点说明 #

• 锚点提取：new URL(ahref, window.location.origin).hash 能智能识别两种链接格式：纯锚点直接返回原内容，完整URL自动提取#后的片段，兼容性拉满。
• 数据存储优化：用对象存储完整URL和纯锚点，既保证查找页面区块时用正确的选择器，又能精准匹配对应的菜单链接。
• 初始化触发：页面加载时主动调用updateActiveMenu()，解决跨页面跳转后菜单不高亮的问题。
• 容错处理：增加!targetSection.length的判断，避免页面中不存在对应锚点区块时抛出错误。

这样修改后，不管菜单链接是纯锚点还是带完整域名的URL，滚动高亮和跨页面跳转后的高亮都能正常工作啦。

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