滚动到下一个<文章>

Scroll to next <article>

本文关键字：文章 gt lt 滚动 下一个      更新时间：2023-09-26

我正在尝试制作一个JavaScript函数，每当按下向下箭头键时，该函数就会滚动到下一篇文章。我所有的HTML元素都是动态的，都只是没有ID的文章标签。到目前为止，我的脚本可以识别按下的向下键，但从这一点来看，我不知道如何制作一个函数，在不命名文章或类似的东西的情况下向下滚动到下一个文章标签。

document.addEventListener('keydown', function(e){
    if(e.keyCode === 40) {
        // function  to scroll down
    }});

我想我需要创建一个变量，它只是HTML页面中的任何文章元素。这可能吗？如果是，我该如何做到这一点，并使函数向下滚动到下一篇文章？提前感谢！

您正在寻找window.scrollTo函数。您所需要的只是识别下一篇文章的Y偏移量。您可以通过计算该节点的offsetTop（加上其所有offsetParent节点）来执行此操作。

另一种解决方案：使用element.scrollIntoView()或element.scorllIntoViewIfNeeded()。它也是跨浏览器的，但我更喜欢第一个解决方案，因为它允许你控制动画，即使在最旧的浏览器中也能工作。

相关文章：