单页模板外部链接无法跳转：技术原理排查及解决方案咨询

嘿，我来帮你搞定这个问题！先拆解一下你的疑问：

一、这款模板用了什么技术？ #

这款单页模板采用的是基于jQuery的单页锚点导航方案，核心特点包括：

• 拦截所有菜单链接的默认点击行为（通过e.preventDefault()和return false），强制走自定义的页面内滚动逻辑
• 使用data-link属性关联页面内的锚点元素，实现点击菜单后平滑滚动到对应区域
• 通过history.pushState()修改浏览器URL，模拟多页面跳转的体验，同时保持页面不刷新
• 自动给当前激活的菜单项添加active类，实现导航高亮效果

二、如何让菜单项跳转到外部页面？ #

问题出在你的jQuery代码拦截了所有菜单链接的默认跳转，包括外部链接，而且因为外部链接没有data-link属性，导致代码尝试获取不存在的锚点元素时抛出错误。这里有两种简单的解决办法：

方法1：给外部链接添加专属类并排除拦截 #

首先给你的外部链接加一个类（比如external-link）：

<li><a id="navorder" class="external-link" href="http://order.company.com" target="_blank">Order Now</a></li>

然后修改jQuery的选择器，把这个类排除在拦截逻辑之外（就像已经排除.social-link那样）：

// 把原来的选择器改成下面这样
$(".menu ul li a").not('.social-link').not('.external-link').click(function(e) {
  // 原来的内部导航逻辑保持不变
  e.preventDefault();
  $(".menu ul li a").removeClass("active");
  tabTarget = $(this).data('link');
  animateByMenu = true;
  var hash = '#' + tabTarget;
  var url = $(this).prop('href');
  var menuItem = $(this).data('link');
  $(".menu li a[data-link=" + menuItem + "]").addClass("active");
  if (url) {
    var top = $(hash).offset().top - 60;
    $('html, body').animate({ scrollTop: top }, 600, function(){ });
    history.pushState('', '', url);
    $('.navbar-toggle:visible').click();
  }
  return false;
});

方法2：在点击事件中判断是否为外部链接 #

如果不想加额外的类，可以在点击事件里直接判断链接是否为外部地址，是的话就放行默认跳转：

$(".menu ul li a").not('.social-link').click(function(e) {
  // 新增：判断当前链接是否为外部链接
  const href = $(this).attr('href');
  if (href && (href.startsWith('http://') || href.startsWith('https://'))) {
    return true; // 让浏览器执行默认的外部跳转逻辑
  }

  // 原来的内部导航逻辑保持不变
  e.preventDefault();
  $(".menu ul li a").removeClass("active");
  tabTarget = $(this).data('link');
  animateByMenu = true;
  var hash = '#' + tabTarget;
  var url = $(this).prop('href');
  var menuItem = $(this).data('link');
  $(".menu li a[data-link=" + menuItem + "]").addClass("active");
  if (url) {
    var top = $(hash).offset().top - 60;
    $('html, body').animate({ scrollTop: top }, 600, function(){ });
    history.pushState('', '', url);
    $('.navbar-toggle:visible').click();
  }
  return false;
});

为什么之前会报错？ #

因为你的外部链接没有设置data-link属性，代码里tabTarget = $(this).data('link')会得到undefined，进而hash = '#undefined'，$(hash).offset()返回undefined，当你尝试读取undefined的top属性时，就会抛出Cannot read property 'top' of undefined的错误。

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