jQuery未识别表达式错误：带URL参数的锚点滚动问题解决

问题背景 #

我使用带URL参数（?taal=用户选择的语言，如NL、EN等）的锚点链接实现页面内跳转滚动，点击链接时执行以下jQuery代码实现平滑滚动：

$('a').click(function (e) {
  $('html, body').animate({
    scrollTop: $($(this).attr('href')).offset().top}, 500);
});

功能正常，但控制台抛出如下错误：

Uncaught Error: Syntax error, unrecognized expression: ?taal=nl#Updates
at Sizzle.error (jquery-3.6.0.js:1681:8)
at Sizzle.tokenize (jquery-3.6.0.js:2381:11)
at Sizzle.select (jquery-3.6.0.js:2842:20)
at Function.Sizzle [as find] (jquery-3.6.0.js:898:9)
at jQuery.fn.init.find (jquery-3.6.0.js:3099:11)
at new jQuery.fn.init (jquery-3.6.0.js:3209:32)
at jQuery (jquery-3.6.0.js:161:10)
at HTMLAnchorElement.<anonymous> (?taal=nl:175:24)
at HTMLAnchorElement.dispatch (jquery-3.6.0.js:5430:27)
at elemData.handle (jquery-3.6.0.js:5234:28)

移除链接中的<?PHP echo $taal; ?>参数后错误消失，但我需要保留该参数用于后续导航，请问如何解决这个错误？

原因分析 #

错误核心是jQuery的选择器引擎Sizzle无法解析包含URL参数的完整href值（如?taal=nl#Updates），它只能识别纯锚点格式（如#Updates）的选择器。

解决方案 #

需要从链接的href中提取仅锚点部分，再用纯锚点来定位目标元素，同时保留URL参数的功能。以下是几种可靠的实现方式：

方法1：字符串分割提取锚点 #

通过split()方法分割href字符串，截取#及后面的内容：

$('a').click(function (e) {
  // 阻止浏览器默认锚点跳转
  e.preventDefault();
  
  const href = $(this).attr('href');
  // 提取锚点部分
  const anchorIndex = href.indexOf('#');
  const targetAnchor = anchorIndex !== -1 ? href.slice(anchorIndex) : '';
  
  if (targetAnchor && $(targetAnchor).length) {
    $('html, body').animate({
      scrollTop: $(targetAnchor).offset().top
    }, 500);
  }
});

方法2：使用原生URL API解析（推荐） #

利用浏览器原生URL对象解析href，直接获取hash属性（即锚点部分），这种方法更健壮，能处理各种复杂URL格式：

$('a').click(function (e) {
  e.preventDefault();
  
  // 构造URL对象，第二个参数是当前页面origin，确保相对路径能正确解析
  const url = new URL($(this).attr('href'), window.location.origin);
  const targetAnchor = url.hash;
  
  if (targetAnchor && $(targetAnchor).length) {
    $('html, body').animate({
      scrollTop: $(targetAnchor).offset().top
    }, 500);
  }
});

方法3：优化选择器，仅处理带锚点的链接 #

如果页面中存在普通跳转链接，可以给选择器添加过滤条件，只处理包含锚点的链接，避免不必要的执行：

// 仅选择href中包含#的链接
$('a[href*="#"]').click(function (e) {
  e.preventDefault();
  
  const url = new URL($(this).attr('href'), window.location.origin);
  const targetAnchor = url.hash;
  
  if (targetAnchor && $(targetAnchor).length) {
    $('html, body').animate({
      scrollTop: $(targetAnchor).offset().top
    }, 500);
  }
});

额外提示 #

• 添加e.preventDefault()可以避免浏览器默认的锚点瞬间跳转，让平滑滚动的体验更连贯。
• 加入$(targetAnchor).length判断，能防止当锚点对应的元素不存在时抛出新的错误。

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