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

Question

平滑滚动脚本的共同点，停止默认链接动作（通过返回false）以防止动画中的跳转。这也会阻止引导导航栏菜单在单击链接时折叠（错误）。

示例：
http://www.bootply.com/NoGAvuQGDE

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

• 如果您返回false，它会在单击链接时发生冲突并停止菜单关闭。
• 如果您返回true，动画会因为链接工作而变得跳跃。

转载：

• 点击dropdown / action链接
• 由于默认操作被阻止，下拉菜单保持打开状态（错误）

从平滑滚动中排除导航栏链接会达到目的。

想法：
我们可以修改平滑滚动脚本以在平滑滚动链接时关闭所有导航栏菜单。 $('.dropdown-toggle').dropdown('collapse') 之类的东西可以工作，但 API 中没有“折叠”操作，只有“切换”。

问：如何在引导页面上进行平滑滚动，不会与导航栏菜单冲突，阻止它们关闭？

---

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;
        }
    }
}

Answer 1

在切换下拉菜单时查看文档树，Bootstrap 功能似乎依赖于父级上的 open 类。在有关事件处理程序的相关代码中（读起来有点晦涩），这个类被切换了。当在活动的菜单上阻止默认行为并且似乎在做这个伎俩时，以下将模拟它：

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

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

有人可能会争辩说，只有在下拉菜单打开时才能点击链接，所以即使这样也足够了：

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

一个下拉inside另一个需要一些额外的脚本，但我想这是一个不太可能的配置。与任何兄弟姐妹的互动显然也很有效。集成在代码中：

$(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;
    }
}

虽然使用之前在 cmets 中发布的内容获得了预期结果，但在额外调试之后，代码需要更加微妙才能找到正确的父级 - 还添加了额外的 if (dropdown) 检查。当然不需要对不存在的东西应用方法。

http://www.bootply.com/hC4s6OEgA1

Answer 2

实现此目的的一种方法是向需要平滑滚动的导航菜单项添加一个附加类，这将使您不想滚动的其他菜单项按预期工作。

您更新的导航菜单 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>

还有你更新的 JQuery：

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

我有 added a JS.Fiddle 如果你想看到它工作。希望对您有所帮助。