使用jQuery，scrollTop和#anchors鎖定奇怪的瀏覽器窗口

使用scrollTop導航到定位點時，我在多個瀏覽器中遇到了一個奇怪的問題。該窗口正確滾動，但以難以破解的方式鎖定。這是Safari中的問題的視頻，但同樣的事情發生在Chrome：使用jQuery，scrollTop和#anchors鎖定奇怪的瀏覽器窗口

http://www.screencast.com/t/vyM16IlVb

注意如何在瀏覽器窗口打架滾動，不管我輕輕地或過分滾動。它最終會打破，但我無法弄清楚是什麼使這成爲可能。

我正在使用jQuery函數來平滑滾動我在網上找到的錨鏈接。除了這個之外，它一般都很好。這是腳本：

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

任何想到這可能是不勝感激。先謝謝你！

來源

2014-12-04 mcleodm3

它看起來像多個滾動動畫正在積累。嘗試添加'stop（）'就像這樣：'$（'html，body'）。stop（）。animate（...' – 2014-12-04 04:10:22

剛剛嘗試過你的建議，沒有幫助，滾動動畫會如何積累？ – mcleodm3 2014-12-04 04:22:50

jQuery隊列動畫，所以在開始新動畫之前停止正在進行的動畫有時會很有用我們可能需要查看更多的代碼才能瞭解這個問題 – 2014-12-04 04:47:12

似乎動畫仍在試圖達到它的目標滾動位置。 jQuery計算相對於當前滾動位置的offset（）。top，此時位置在屏幕之外，或者是負值。所以當你排隊動畫到達負面的滾動位置，它永遠不會達到它。

嘗試在觸發動畫之前進行簡單檢查並防止出現負面目標。

var top = target.offset().top; 

$('html,body').animate({ 
    scrollTop: top < 0 ? 0 : top 
}, 1000);

但是這不會滾動到你想要的位置，如果在頁面滾動，來解決這個問題考慮到當前滾動位置是這樣的：

var top = target.offset().top + $(window).scrollTop(); 

$('html,body').animate({ 
    scrollTop: top // top should never be negative this way 
}, 1000);

來源

2014-12-04 05:05:55 Juank

感謝您的信息我嘗試了這種解決方案，但結果更加奇怪：滾動到頂部，但隨後在頂部和原始點擊之間反彈6次。觀看：[http://www.screencast.com/t/aWkiqdSdYT](http://www.screencast.com/t/ aWkiqdSdYT） – mcleodm3 2014-12-04 14:27:56

原來我有完全相同的代碼塊在我的站點範圍的腳本文件中重複，因此將它包括在本地（同一腳本的兩個實例）導致衝突。刪除本地副本導致一切正常工作。

來源

2014-12-04 15:17:59 mcleodm3

使用jQuery，scrollTop和#anchors鎖定奇怪的瀏覽器窗口

回答

相關問題