Bootstrap 3和ScrollTop功能：＃鏈接衝突

我正在使用BootStrap 3構建單頁網站。要移動到頁面的不同部分，我在http://css-tricks.com/snippets/jquery/smooth-scrolling/處找到了平滑滾動功能，它工作正常。Bootstrap 3和ScrollTop功能：＃鏈接衝突

$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
});

平滑滾動檢測環節，從第 <a href="#zone">Scroll to Section Zone</a>

但鏈接以＃開始在引導旋轉木馬也使用
data-target="#myCarousel"
所以按鈕移動到上一張/下一張幻燈片在幻燈片的行爲模式奇怪的方式。

我已經接近沒有Javascript的知識，但我意識到代碼的第二行是關於要避免的鏈接：所以我把「#myCarousel」放在該部分。下面你可以找到編輯的第二行：（！非常令人驚訝）

$('a[href*=#]:not([href=#],"#myCarousel")').click(function() {

我的解決方案的工作......幾乎工程！
只有一個問題：滾動不再平滑。
點擊按鈕，在目標鏈接上跳轉頁面。

任何想法爲什麼不光滑？

發現的解決方案

感謝所有的答案。
之前發佈這個要求，我做了我的搜索jquery api

我找到一個解決方案：現在二線讀
$('a[href*=#]').not("[href=#], [href=#myCarousel]").click(function() {

來源

2014-06-20 Sebastian Zeb

因爲你:not選擇是寫錯了你毀了JavaScript函數。因此，平滑滾動不再起作用。嘗試做這種方式：

$('a[href*=#]:not(#myCarousel)').click(function() {

瞭解更多關於:not CSS selectorhere

來源

2014-06-20 12:03:59 Sebsemillia

謝謝您的回答和「破壞」 javascritp對不起！ :-) –

對不起。您的解決方案不起作用。 –

這裏的問題是，你的選擇是不工作的罰款。

如果你打開控制檯窗口，並嘗試寫：

$('a[href*=#]:not([href=#],"#myCarousel")')

你會看到的結果是錯誤的，因爲這一點，smoothscrolling功能不能正常使用的默認行爲直接顯示鏈接正在踢入。

嘗試：

$('a[href*=#]').not('[href=#]','#myCarousel').click(function() {

這將選擇以下鏈接：

所有a包含在其中＃標籤。
不具有href直接設置爲#
沒有位於內#myCarousel

來源

2014-06-20 12:09:49

Bootstrap 3和ScrollTop功能：＃鏈接衝突

回答

相關問題