平滑滚动带有粘性导航栏的引导页面

Question

平滑滚动脚本通用，停止默认链接操作（通过返回false）以防止动画跳转。当点击一个链接（坏）时，这也会停止引导的导航栏菜单。

实施例：
http://www.bootply.com/NoGAvuQGDE

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

• 如果您返回false，它会在点击链接时冲突并停止菜单关闭。
• 如果您返回true，则由于链接正常工作，动画会变得很刺激。

重现：

• 点击dropdown/action链接
• 下拉保持打开状态（坏），由于阻塞默认操作从smooth-

排除导航栏链接滚动会击败目的。

理念：
我们可以修改平滑滚动脚本关闭所有导航栏菜单时，一个环节是平滑滚动。像$('.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'); 

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

$(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 (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如果你想看到它的工作。希望有所帮助。