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

Question

平滑滚动脚本通常会停止默认的 link 动作（通过 returning false）以防止动画跳转。这也会阻止 bootstrap 导航栏菜单在单击 link（坏）时折叠。

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

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

如果您 return false，它会在单击 link 时发生冲突并停止菜单关闭。
如果您 return true，由于 link 工作，动画会变得不稳定。

转载：

点击dropdown / actionlink
由于默认操作被阻止，下拉菜单保持打开状态（不好）

从平滑滚动中排除导航栏 links 将达不到目的。

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

问：如何在 bootstrap 页面上实现平滑滚动，而不与导航栏菜单冲突，阻止他们关闭？

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

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

您更新的导航菜单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 如果你想看到它工作。希望对您有所帮助。

Answer 2

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

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

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

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

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

仅在锚点links上使用此脚本时，可以顺便简化一下：

$(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 (dropdown) 检查。当然不需要对不存在的东西应用方法。

http://www.bootply.com/hC4s6OEgA1

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

Smooth-scroll a bootstrap page with sticky navbar

html

javascript

jquery

smooth-scrolling

twitter-bootstrap