CODEWITHSUNDEEP
javascriptphpjqueryhtmlwordpress
Flo Barth
Flo Barth

Reputation: 1

JQuery scrollTo an element working only once

I am working on a website where I display my children pages through a slideshow on the parent page. On each children pages I have a scroll down link to scroll to the first title above the image. However, when I link to the title element, it is only working with the first child page displayed and not on the other ones. I tried to replace the element by a value and when doing that, it is working with all my pages, so it is not due to the scroll function. I tried to change the target element ID by a class, because I display my pages through a loop and thought an ID might be the problem, but it still not working. Anyone might know what's happening here? Here is my code:

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
}

I managed to made it work one time on all the pages, but after working on something else, it stopped working, and I didn't modified the js line. I hope somebody can point me the direction to go to fix that! Thank you!

Upvotes: 0

Views: 415

Answers (2)

Mehrnoosh
Mehrnoosh

Reputation: 11

You need to find the next title, so you should write something like that:

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

Here's a Fiddle snippet for more clarity.

Upvotes: 0

Ali Qorbani
Ali Qorbani

Reputation: 1263

shortly it is because of your js selector. when you use $('h3.title') for selector it goes to scan from top of your code and get the first one.

for that you can use something like code below:

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

Note: I didn't checked it on real site. let me know if it works or not.

Upvotes: 1

Related Questions