本文详解为何页面内锚点链接被强制拦截为平滑滚动、导致外部链接无法正常跳转，并提供精准的 javascript 选择器优化方案，确保锚点链接平滑滚动，而外部链接保持默认跳转行为。
在单页应用（SPA）或滚动型官网中，开发者常通过 e.preventDefault() + animate() 实现页面内平滑滚动效果。但若事件监听器粗暴地绑定到所有 标签（如 $("nav a").on("click", ...)），就会意外拦截所有链接的默认行为——包括本应跳转到外部页面或新 URL 的链接（如 href="https://example.com/whitepaper.pdf" 或 href="/docs"），导致它们“点击无效”，只能靠右键→“在新标签页中打开”才能生效。
根本原因在于：当前 JS 代码未区分「页面内锚点」与「跨页面/外部链接」，统一调用了 e.preventDefault()，从而禁用了浏览器原生跳转逻辑。
✅ 正确做法是：精准作用于仅需平滑滚动的锚点链接，放行其余链接。
✅ 推荐解决方案：语义化类名 + 精确选择器
-
为需要平滑滚动的锚点添加专属类名（如 scroll-to-section）：
Home Play to Earn Tokenomics White Paper Support
-
JS 中仅监听带该类名的链接：
// 仅对带 .scroll-to-section 的链接启用平滑滚动 $("a.scroll-to-section").on("click", function (e) { e.preventDefault(); const target = $(this).attr("href"); // 确保目标元素存在，避免 offset() 报错 if ($(target).length) { $("html, body").animate({ scrollTop: $(target).offset().top - 100 }, 500); } });
⚠️ 注意事项与增强建议
- 锚点有效性校验：添加 if ($(target).length) 判断，防止点击无效 #id 时脚本报错；
- 移动端兼容性：body 在部分 iOS Safari 中可能不支持 scrollTop，建议统一使用 document.documentElement 或 $("html")（jQuery 已内部处理）；
- SEO 与可访问性：保留真实 href 值（如 #home），确保无 JS 时仍能基础跳转；平滑滚动作为渐进增强；
- 避免混淆 # 与路径：href="#whitepaper" 是锚点，href="/whitepaper" 是路由跳转——二者语义完全不同，切勿混用。
✅ 总结
问题本质是事件委托范围过大。修复核心在于：分离关注点——用语义化 CSS 类明确标识“需平滑滚动的锚点”，JS 仅响应此类链接，其他链接（含绝对 URL、相对路径、邮件链接等）将完全保留浏览器默认行为。此举既保障用户体验，又维护链接功能完整性，是专业前端实践中的标准解法。
