jQuery平滑滚动脚本在下拉菜单链接上失效问题求助

看起来你遇到的问题是Bootstrap下拉菜单的toggle链接没法触发平滑滚动，普通导航链接却正常工作——这其实是个很常见的Bootstrap组件和自定义脚本冲突的场景，我来帮你分析解决。

问题根源 #

你的平滑滚动脚本逻辑本身没问题，但带dropdown-toggle类的链接被Bootstrap的Dropdown插件拦截了点击事件：

• Bootstrap会优先处理这个点击，用来展开/收起下拉菜单，并且默认会阻止锚点链接的默认跳转行为
• 这就导致你的平滑滚动脚本要么没机会执行，要么执行了但被插件的行为干扰

解决方案 #

我给你调整一下脚本，分开处理普通锚点链接和下拉toggle链接，确保两者功能都正常：

$(function() {
  // 处理普通锚点链接（非下拉toggle）
  $('a[href*="#"]:not([href="#"]):not(.dropdown-toggle)').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({ scrollTop: target.offset().top }, 1000);
        return false; // 阻止默认锚点跳转
      }
    }
  });

  // 专门处理带dropdown-toggle的锚点链接
  $('a.dropdown-toggle[href*="#"]:not([href="#"])').click(function(e) {
    // 先执行平滑滚动逻辑
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({ scrollTop: target.offset().top }, 1000);
      }
    }
    
    // 手动触发下拉菜单切换，保留原有下拉功能
    $(this).dropdown('toggle');
    // 阻止默认锚点跳转，避免页面直接跳转到目标位置
    e.preventDefault();
  });
})

关键说明 #

1. 分开处理逻辑：把普通链接和下拉链接的事件处理分开，避免相互干扰
2. 手动触发下拉：对toggle链接，我们先执行滚动，再通过dropdown('toggle')手动调用Bootstrap的下拉切换，确保菜单正常展开
3. 阻止默认行为：用e.preventDefault()替代return false，避免完全阻止事件冒泡，保证下拉功能正常

另外，你可以先确认一下#section-2这个目标元素确实存在于页面中，这是滚动生效的基础哦。

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