购买的HTML模板锚点链接跳转页面而非滚动问题求助

问题场景 #

使用购买的HTML模板搭建网站时，锚点链接（如href="#projects"指向对应id="projects"的section）未按预期触发平滑滚动，点击后直接刷新页面。已确认锚点结构设置正确，怀疑是模板自带的JS/CSS干扰了默认行为。

简化代码示例：

<li class="link menu-timeline">
  <a href="#projects">
    <div class="before-span">
      <span data-hover="Proyectos">Proyectos</span>
    </div>
  </a>
</li>

<section id="projects">
  <!-- 其余代码 -->
</section>

排查与修复建议 #

1. 检查模板JS的事件拦截逻辑 #

很多模板会给导航链接绑定自定义点击事件，可能错误阻止了锚点默认行为或触发页面刷新：

• 临时注释模板核心JS文件（如main.js、script.js），测试锚点是否恢复正常。若正常，逐段排查JS中的点击事件，重点找错误调用window.location.href、location.reload()，或未正确处理锚点的preventDefault()逻辑。
• 常见错误示例：

  document.querySelectorAll('.menu-timeline a').forEach(link => {
    link.addEventListener('click', function(e) {
      // 错误触发页面刷新
      window.location.href = this.href;
    });
  });
  

• 修复时替换为正确的平滑滚动逻辑：

  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      e.preventDefault();
      const targetId = this.getAttribute('href');
      if(targetId === '#') return;
      const targetElement = document.querySelector(targetId);
      if(targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth' });
      }
    });
  });
  

2. 确认CSS的平滑滚动配置 #

检查全局样式是否开启平滑滚动，若模板重置了该属性也会影响效果：

html {
  scroll-behavior: smooth; /* 开启全局平滑滚动，确保未被模板覆盖为auto */
}

同时排查html/body是否被设置overflow: hidden或自定义滚动容器，这类规则会干扰锚点滚动行为。

3. 排查基础路径干扰 #

若网站部署在子目录，或模板设置了<base>标签，可能导致锚点解析错误触发刷新：

• 临时移除<base>标签测试，若恢复正常，调整<base>的href属性与实际部署路径一致。

4. 查看浏览器控制台错误 #

打开开发者工具（F12）的Console面板，点击锚点时查看是否有JS报错（如目标元素找不到、权限错误等），这类报错可能导致默认行为异常。

5. 强制覆盖默认行为 #

若找不到模板中的干扰代码，添加一段优先级更高的自定义JS，强制实现平滑滚动：

document.addEventListener('DOMContentLoaded', function() {
  const anchorLinks = document.querySelectorAll('a[href^="#"]:not([href="#"])');
  anchorLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      const target = document.querySelector(this.getAttribute('href'));
      if(target) {
        target.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
        // 可选：更新URL锚点但不刷新页面
        window.history.pushState({}, '', this.getAttribute('href'));
      }
    });
  });
});

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