jQuery滾動到滾動事件上的某個點

在我的頁面中，我的腳本中有幾個布爾值，用於檢查第一個屏幕是否已激活，以及第二個屏幕是否同樣。屏幕1填滿整個屏幕。jQuery滾動到滾動事件上的某個點

它看起來是這樣的：

var headerLoaded = true, 
    contentLoaded = false;

當我滾動，我希望頁面全自動滾動到我的網頁上的「內容」區域。我有這樣的代碼：

$(window).scroll(function() { 
    if (($(window).scrollTop() > 0) && (!contentLoaded && headerLoaded)) { 
     $('html, body').animate({ 
      scrollTop: $('#content').offset().top 
     }, 500, function() { 
      contentLoaded = true; 
      headerLoaded = false; 
     }); 
    } 
});

它檢查是否我不在頁面的頂部，和2個布爾值。

功能的偉大工程，但它仍然調用

 $('html, body').animate({ 
      scrollTop: $('#content').offset().top 
     }, 500, function() { 
      contentLoaded = true; 
      headerLoaded = false; 
     });

一部分，當我向下滾動到「內容」股利。

因此，每當我在'內容'div即時滾動，滾動回到頂部。

順便說一句，這兩個div是絕對的。

來源

2014-05-15 Bas

食物的思考：劫持滾動事件動畫頁面滾動是壞的UX（根據一些聰明的人）。 http://trentwalton.com/2013/10/23/scroll-hijacking/ https://news.layervault.com/stories/9138-on-scroll-hijacking – user1967

因此，動畫製作人員一遍又一遍地調用原始$(window).scroll(...)。

嘗試告訴你的主scroll聽衆如果它已經有動畫，就不要開始動畫。

var animating = false; 
$(window).scroll(function() { 
    if (!animating && $(window).scrollTop() > 0 && !contentLoaded && headerLoaded) { 
     animating = true; 
     $('html, body').animate({ 
      scrollTop: $('#content').offset().top 
     }, 500, function() { 
      animating = false; 
      contentLoaded = true; 
      headerLoaded = false; 
     }); 
    } 
});

等待..我剛纔讀它.. 你只是鎖定屏幕在內容......爲什麼動畫呢？

我給的答案是說動畫滾動還會觸發主滾動，導致無限循環...但是你最初想做什麼？

來源

2014-05-15 17:20:51 Funkodebat

你的代碼工作順便說一句，謝謝你。我試圖讓滾動升技更好，當我只是scrolldown一次，它看起來非常醜陋，我仍然可以看到我的主屏幕的一部分，我不想要，所以我試過了？好主意不是嗎？：P @Funkodebat – Bas

那麼你想讓頁面始終滾動到內容的頂部？如果是這樣，爲什麼有一個滾動條呢？ – Funkodebat

因爲我不能禁用滾動人的權利？當你將它製作成動畫時，它會更流暢，只是一次。 @Funkodebat – Bas

jQuery滾動到滾動事件上的某個點

回答

相關問題