Javascript 使用粘性导航栏平滑滚动引导页面

平滑滚动脚本在常见情况下，停止默认链接操作（返回false）以防止动画跳转。这也会阻止引导导航栏菜单在单击链接时崩溃（错误）

示例：

在平滑滚动脚本的最后一行中

• 如果返回

  false

  ，则在单击链接时会发生冲突并停止关闭菜单
• 如果返回

  true

  ，则由于链接工作，动画会变得跳跃

复制：

• 单击

  下拉列表/操作

  链接
• 由于被阻止的默认操作，下拉列表保持打开（错误）

将导航栏链接排除在平滑滚动之外将无法达到目的

想法：
我们可以修改平滑滚动脚本，在平滑滚动链接时关闭所有导航栏菜单。类似于

$（'.dropdown toggle'）。dropdown（'collapse'）

可以工作，但API中没有“collapse”操作，只有“toggle”

Q:如何在引导页面上平滑滚动，而不与导航栏菜单冲突，从而阻止它们关闭

---

smoothscroll脚本，供将来参考：

$(function(){
    $('.navbar a[href*=#], a.smooth').click(function() {return smoothScroll(this)});
});

function smoothScroll(linkItem) {

    if (location.pathname.replace(/^\//,'') == linkItem.pathname.replace(/^\//,'')
    && location.hostname == linkItem.hostname) {

        var $target = $(linkItem.hash);
        $target = $target.length && $target || $('[name=' + linkItem.hash.slice(1) +']');

        if ($target.length) {
        var targetOffset = $target.offset().top;
        $('html,body').animate({scrollTop: targetOffset}, 500);
        return false;
        }
    }
}

---

实现这一点的一种方法是向需要平滑滚动的导航菜单项添加一个额外的类，这将使您不希望滚动的其他菜单项按预期工作

更新的导航菜单HTML

<ul class="nav navbar-nav">
  <li class="smooth"><a href="#a">About</a></li>
  <li class="smooth"><a href="#b">Contact</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="http://www.google.com" target="_blank">Action</a></li>
    </ul>
  </li>
</ul>

---

如果你想看到它工作的话，我有。希望有帮助。

在切换下拉菜单时查看文档树，引导功能似乎依赖于父级上的

打开的
类。在有关事件处理程序的相关代码中（读起来有点晦涩难懂），该类被切换。当在一个激活的菜单上阻止默认行为并且似乎正在进行操作时，下面将对其进行模拟：

dropdown = linkItem.closest('.dropdown');

if ($(dropdown).hasClass('open')) $(dropdown).removeClass('open');

有人可能会说，只有当下拉列表打开时，链接才可以单击，所以即使这样也应该足够了：

$(dropdown).toggleClass('open');

另一个下拉列表中的下拉列表需要一些额外的脚本，但我猜这是一个不太可能的配置。与兄弟姐妹的互动显然也很有效。纳入守则：

$(function(){
    $('.navbar a[href*=#]').click(function() {return smoothScroll(this)});
});

function smoothScroll(linkItem) {

    if (location.pathname.replace(/^\//,'') == linkItem.pathname.replace(/^\//,'')
    && location.hostname == linkItem.hostname) {

        var $target = $(linkItem.hash);
        $target = $target.length && $target || $('[name=' + linkItem.hash.slice(1) +']');
        var dropdown = linkItem.closest('.dropdown');

        if ($target.length) {
        if (dropdown) $(dropdown).toggleClass('open');
        var targetOffset = $target.offset().top;
        $('html,body').animate({scrollTop: targetOffset}, 500);
        return false;
        }
    }
}

当仅在锚定链接上使用此脚本时，可以通过以下方式简化：

$(function(){
    $('.navbar a[href*=#]').click(function() {smoothScroll(this)});
});

function smoothScroll(linkItem) {

    var $target = $(linkItem.hash),
    dropdown = linkItem.closest('.dropdown');

    if ($target.length) {
    if (dropdown) $(dropdown).toggleClass('open');
    var targetOffset = $target.offset().top;
    $('html,body').animate({scrollTop: targetOffset}, 500);
    return false;
    }
}

虽然通过前面评论中发布的内容获得了预期的结果，但经过额外的调试后，代码需要更精细一些才能找到正确的父级-还添加了额外的
if（下拉）
检查。当然，不需要在不存在的东西上应用方法

如果你通读了你的文章，你甚至没有问任何问题，也没有发布任何代码或提供示例。如果你想让别人帮助你，请澄清你的问题，并提供例子等@crazymatt谢谢你，之前我认为这个问题对于bootstrap用户来说是非常明显的。我已经编辑了这个问题。@Shikkediel引用“open”类是这里的关键！API有一个toggle方法（不幸的是没有“collapse”），我引用了“open”类并使用了“toggle”方法，以便对引导程序可能持有的任何内部变量友好。如果这个问题重新开始，我可以接受你的回答。谢谢。问题是我需要所有的链接来平滑滚动（一页）。谢谢你的详细回答。通常任何链接都会关闭菜单。使用“打开”类提示，我刚刚添加了行
$（'.dropdown.open>.dropdown toggle'）。dropdown（'toggle'）false
之前，将code>转换为原始脚本。谢谢你的回答。
$(function(){
    $('.navbar a[href*=#]').click(function() {smoothScroll(this)});
});

function smoothScroll(linkItem) {

    var $target = $(linkItem.hash),
    dropdown = linkItem.closest('.dropdown');

    if ($target.length) {
    if (dropdown) $(dropdown).toggleClass('open');
    var targetOffset = $target.offset().top;
    $('html,body').animate({scrollTop: targetOffset}, 500);
    return false;
    }
}