Question

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

我可以将一个函数绑定到keypress就好了，我只需要一些帮助javascript（我使用的是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

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

1 个答案: