JQuery scrollTo элемент, работающий только один раз

Question

Я работаю над веб-сайтом, где я показываю свои детские страницы через слайд-шоу на родительской странице. На каждой детской странице есть ссылка прокрутки вниз, чтобы перейти к первому заголовку над изображением. Однако когда я ссылаюсь на элемент title, он работает только с первой отображаемой дочерней страницей, а не с остальными. Я попытался заменить элемент на значение, и при этом он работает со всеми моими страницами, поэтому это не связано с функцией прокрутки. Я пытался изменить идентификатор целевого элемента по классу, потому что я отображал свои страницы через al oop и думал, что идентификатор может быть проблемой, но он все еще не работает. Кто-нибудь может знать, что здесь происходит? Вот мой код:

JS:

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

HTML / PHP:

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
}

Мне удалось заставить его работать один раз на всех страницах, но после работы над чем-то другим он перестал работать, и я не изменил строку js. Я надеюсь, что кто-то может указать мне направление на go, чтобы это исправить! Спасибо!

Answer 1

в скором времени это из-за вашего js селектора. когда вы используете $('h3.title') для селектора, он идет на сканирование сверху вашего кода и получает первый.

для этого вы можете использовать что-то вроде кода ниже:

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

Примечание: я не проверял это на реальном сайте. дайте мне знать, если это работает или нет.

Answer 2

Вам нужно найти следующий заголовок, поэтому вы должны написать что-то вроде этого:

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

Вот фрагмент кода Fiddle для большей ясности.