Javascript JQuery滚动到只工作一次的元素

我正在一个网站上工作，在那里我通过幻灯片在父页面上显示我的子页面。在每个子页面上，我都有一个向下滚动链接，可以滚动到图像上方的第一个标题。但是，当我链接到title元素时，它只处理显示的第一个子页面，而不处理其他子页面。我试着用一个值替换元素，当我这样做时，它可以处理我的所有页面，所以这不是由于滚动功能。我试图通过一个类来更改目标元素ID，因为我通过一个循环来显示我的页面，并认为ID可能是问题所在，但它仍然不起作用。有人知道这里发生了什么吗？这是我的密码：

JS:

    $('.scroll-down').click (function scroll() {
        $(".slider").scrollTo($('h3.title') ,800);
    }); 

foreach ($children as $post){
$thumbnailid=get_post_thumbnail_id($post);
$postthumbnail= wp_get_attachment_image_src($thumbnailid,'full-size');
  setup_postdata($post);
  ?>
  <div class = mySlides>
    <a class="scroll-down"></a>  
    <img src="<?php echo $postthumbnail[0];?>">
    <h3 class="title"><?php echo ($post->post_title);?></h3>
    <?php the_content($post);?>
  </div> 
  <?php
}

HTML/PHP:

    $('.scroll-down').click (function scroll() {
        $(".slider").scrollTo($('h3.title') ,800);
    }); 

foreach ($children as $post){
$thumbnailid=get_post_thumbnail_id($post);
$postthumbnail= wp_get_attachment_image_src($thumbnailid,'full-size');
  setup_postdata($post);
  ?>
  <div class = mySlides>
    <a class="scroll-down"></a>  
    <img src="<?php echo $postthumbnail[0];?>">
    <h3 class="title"><?php echo ($post->post_title);?></h3>
    <?php the_content($post);?>
  </div> 
  <?php
}

foreach（$childrenas$post）{
$thumbnailid=get\u post\u thumbnailid（$post）；
$postthumbnail=wp_get_attachment_image_src（$thumbnailid，'full-size'）；
设置_postdata（$post）；
?>
">
很快，这是因为您的js选择器。当您使用选择器
$（'h3.title'）
时，它会从代码顶部扫描并获取第一个选择器

为此，您可以使用如下代码：

 $('.scroll-down').click (function scroll() {
     var nextTitle = $(this).parent().find('h3.title');
     $(".slider").scrollTo(nextTitle) ,800);
 }); 

注意：我没有在real site上查看它。请告诉我它是否有效。
您需要找到下一个标题，所以您应该这样写：

$('.scroll-down').click(function(e) {
  e.preventDefault();
  var $nextTitle = $(e.currentTarget).parent().next().find('h3.title');
  $('body').scrollTo($nextTitle, 800);
});

这里有一个更清晰的答案。
谢谢你的回复，但不幸的是，它不起作用，甚至使第一个无法工作。也许我输入错误了？它似乎遗漏了a）在你的文章中删除
.prev（）
，然后再试一次。非常感谢你！阿里！你太棒了！现在工作完美了：）