使用javascript向下滾動到下一個元素

Question

我在我的網站上實現了允許用戶向下移動到下一個div（即具有類「post」）的鍵盤控件，以及直到以前的div，與鍵盤箭頭鍵。

我可以將一個函數綁定到按鍵就好了，我只需要一些幫助（我使用jquery）確定哪個div是下一個/上一個。

重要的是，如果用戶使用標準滾動條在屏幕中間滾動一下，下一項就是接下來的任何事情，相對於其觀察窗口的頂部，所以我知道我需要使用下一個/前一個div來計算用戶目前的滾動位置..但我有點失去了如何做到這一點。

Answer 1

首先，你將不得不使用$(document).scrollTop()來測試當前的滾動條位置。

一旦你有了，你可以使用$(".post").each()迭代你的元素，比較它們的頂部偏移量和滾動條位置。如果它低於滾動條，那麼這是您的下一個元素，因此請使用return false跳出循環。

完整的示例：

var scrollPosition = $(document).scrollTop(), 
    nextPost = 0, 
    currentPosition = 0; 
$(".post").each(function() { 
    currentPosition = $(this).offset().top; 
    if (currentPosition > scrollPosition) { 
     nextPost = currentPosition; 
     return false; // break the loop 
    } 
}); 
$(document).scrollTop(nextPost); // Scrolls the page to the post