使用javascript向下滚动到下一个元素

Posted 2023-02-25

【中文标题】使用javascript向下滚动到下一个元素

【英文标题】：Scrolling down to the next element with javascript

【发布时间】：2011-04-27 21:33:22

【问题描述】：

我正在我的网站上实现键盘控件，允许用户使用键盘箭头键向下移动到下一个 div（具有“post”类）以及上一个 div。

我可以很好地将一个函数绑定到按键，我只需要一些关于确定哪个 div 是下一个/上一个 div 的 javascript（我正在使用 jquery）的帮助。

重要的是，如果用户使用标准滚动条向下滚动屏幕的一半，下一个项目就是下一个，相对于他们的查看窗口的顶部，所以我知道我需要使用计算下一个/上一个 div用户当前的滚动位置.. 但我对如何做到这一点有点迷茫。

【参考方案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