滚动到下一个<article> </article>

Question

我正在尝试创建一个JavaScript函数，只要按下向下箭头键，它就会滚动到下一篇文章。我的所有HTML元素都是动态的，都只是没有ID的文章标签。我到目前为止的脚本可以识别按下的向下键，但是从这一点来说，我不知道如何创建一个向下滚动到下一篇文章标签的功能，而无需命名文章或类似的内容。

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

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

Answer 1

您正在寻找window.scrollTo功能。您所需要的只是确定下一篇文章的Y偏移量。您可以通过计算该节点的offsetTop（以及其所有offsetParent个节点）来完成此操作。

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