使用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