如何通过href/onclick滚动到含特殊字符（如点号）的ID元素

问题根源 #

你遇到的问题我之前也碰过好几次——jQuery选择器会把点号.当成类选择器的标识。比如你写$(#siteNavigation.about)，jQuery会理解为「找ID是siteNavigation且拥有about类的元素」，而不是ID本身就是siteNavigation.about的元素。这也是为什么HOME能正常工作（它的ID没有特殊字符），但ABOUT和CONTACT完全没反应的核心原因。

解决方法：转义特殊字符 #

要让jQuery正确识别带点号的ID，需要把ID里的点号用**双反斜杠\\.**转义（单个反斜杠在JavaScript字符串里是转义符，所以得写两个才能表示一个实际的反斜杠）。

修改后的完整代码 #

$("#site-navigation .global_error_link_sample").on('click', function(e) {
    e.preventDefault();
    // 把href里的所有点号替换成转义后的形式
    var target = $(this).attr('href').replace(/\./g, '\\.');
    $('html, body').stop().animate({
        scrollTop: ($(target).focus().offset().top - 200)
    }, 500);
});

关键细节说明 #

• 用正则表达式/\./g全局匹配所有点号，替换成\\.后，原来的#siteNavigation.about就变成了#siteNavigation\\.about，jQuery就能准确找到对应ID的元素了。
• 保留focus()方法是为了提升无障碍访问体验，滚动后让目标元素获得焦点，方便键盘导航用户操作。

如果你的ID后续还会出现其他特殊字符（比如#、!、$等），可以把正则扩展成通用版本，一次性处理所有特殊字符：

var target = $(this).attr('href').replace(/[.#!$]/g, function(match) {
    return '\\' + match;
});

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