使用粘性導航欄平滑滾動引導頁面

Question

通常，平滑滾動腳本會停止默認的鏈接操作（返回false），以防止動畫跳轉。 單擊鏈接（錯誤）時，這也可以停止引導導航欄菜單折疊。

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

在平滑滾動腳本的最后一行；

• 如果返回false ，則會發生沖突，並在單擊鏈接時停止菜單關閉。
• 如果返回true ，則由於鏈接有效，動畫會跳動。

復制：

• 點擊dropdown / action鏈接
• 由於默認操作被阻止，因此下拉菜單保持打開狀態（錯誤）

從導航滾動中排除導航欄鏈接將達到目的。

理念：
當鏈接被平滑滾動時，我們可以修改平滑滾動腳本以關閉所有導航欄菜單。 像$('.dropdown-toggle').dropdown('collapse')這樣的東西可以工作，但是API中沒有“ collapse”操作，只有“ toggle”。

問：如何在引導頁面上進行平滑滾動， 而又不與導航欄菜單發生沖突 ，並阻止它們關閉？

---

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

如果您希望看到它，我添加了一個JS.Fiddle 。 希望能有所幫助。