如何滚动到下一个动态实例（wordpress）

Question

我正在构建一个wp主题，将所有帖子调用到主页。

每个实例都是全屏，并且在该实例中嵌套了一个标记为“next”的按钮。当用户单击该按钮时，我希望界面滚动到下一个动态加载的实例，但我想出的任何内容似乎都不起作用。

那里的任何jQuery专家都在关心如何解决这个问题？

一如既往，非常感谢任何帮助！

Answer 1

好吧，我想了一会儿，所以我会回答我自己的问题以防万一其他人想知道。

似乎使用jQuery .closest＆amp; .next选择器。我还在.click函数中添加了.preventDefault()方法，因为它阻止了锚点通过href（默认）函数。

这是标记：

<article id="article1" class="home-article">
    <a href="#" class="home-article-next">next</a>
</article>

<article id="article2" class="home-article">
    <a href="#" class="home-article-next">next</a>
</article>

CSS：

.home-article {
    width: 100%;
    height: 100vh;
    position: relative;
}

这是jQuery：

$('.home-article-next').click(function(e) {
  e.preventDefault();
  var article = $(this).closest(".home-article").next()
  $('html, body').animate({
    scrollTop: article.offset().top
  }, 500);
});