gymso 模板的平滑滚动脚本错误地将所有导航链接的 `href` 值（包括 `http://` 外部地址）当作 css 选择器使用，从而触发非法查询异常；解决方案是通过添加 css 类并修改 jquery 选择器，排除外部链接的平滑滚动逻辑。
该问题源于 Gymso 模板中 custom.js 文件内的一段平滑滚动（SmoothScroll）代码。其核心逻辑是：当用户点击导航栏链接时，脚本会读取 标签的 href 属性值（如 #home），并将其直接传入 jQuery 的 $() 函数（即 $(href)），试图定位页面中对应 ID 的元素，再执行滚动动画。
然而，当 href 是外部 URL（例如 http://test.com 或 https://example.org）时，jQuery 会尝试将其作为 CSS 选择器执行 —— 而 http://test.com 显然不是合法的选择器语法，因此抛出如下错误：
Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'http://test.com' is not a valid selector.
✅ 正确解决思路：不修改原有平滑滚动功能，而是精准排除外部链接，使其绕过该逻辑，自然跳转。
✅ 推荐修复步骤（两步完成）
1. 在 HTML 中为外部链接添加专属类名
在 index.html 的导航栏中，为每个需跳转至站外的 标签添加 external 类（也可用 nav-external 等语义化名称）：
<ul class="navbar-nav ml-lg-auto">
<!-- 其他内部链接 -->
<li class="nav-item">
<a href="#about" class="nav-link smoothScroll">About</a>
</li>
<!-- ✅ 外部链接：添加 'external' 类 -->
<li class="nav-item">
<a href="https://test.com" class="nav-link external">Test Site</a>
</li>
</ul>? 提示：无需保留 smoothScroll 类；该类仅作语义标识，实际行为由 JS 控制。
2. 修改 custom.js 中的选择器逻辑
打开 js/custom.js，定位到平滑滚动代码块（通常位于注释 // SMOOTHSCROLL NAVBAR 下方），将原选择器：
$('.navbar a, .hero-text a').on('click', function(event) { ... });更新为（关键改动：添加 :not(.external)）：
// SMOOTHSCROLL NAVBAR
$(function() {
$('.navbar a:not(.external), .hero-text a:not(.external)').on('click', function(event) {
var $anchor = $(this);
// ⚠️ 安全增强：确保 href 是锚点（以 # 开头）
if ($anchor.attr('href') && $anchor.attr('href').startsWith('#')) {
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 49
}, 1000);
event.preventDefault();
}
});
});✅ 增强说明：新增的 if 判断进一步保障健壮性——仅对以 # 开头的锚点链接执行滚动，彻底规避无效 href 引发的异常。
? 注意事项与最佳实践
- 不要移除 event.preventDefault() 对内部链接的影响：它仅阻止默认跳转行为，而外部链接因被 :not(.external) 排除，将保持原生跳转。
- 避免使用 javascript:void(0) 或 # 伪链接模拟外部跳转：这会破坏可访问性和 SEO，应始终使用真实 http(s):// 地址。
-
如需新窗口打开外部链接，可在 HTML 中补充 target="_blank" rel="noopener"：
<a href="https://test.com" class="nav-link external" target="_blank" rel="noopener">Test Site</a>
- 验证修改后效果：内部链接（如 #home）仍平滑滚动；外部链接正常跳转且无控制台报错。
此方案兼容性强、侵入性低，无需重写滚动逻辑，即可安全支持混合导航结构，是维护 Tooplate 免费模板的最佳实践。
