javascript - 单击时滚动到同级元素

Question

请看一下这个 FIDDLE 在单击时显示和隐藏容器中的文本。我想做的是，当我单击打开第一个隐藏文本，然后向下滚动以单击打开另一个隐藏文本时，我希望它滚动回该打开文本的同级图像以使其保持在 View 中。如何找到同级元素并在单击时滚动到它？

此内容无效。

  $('.slider2').click(function(e) {
   var imageposition = $(this).closest('.imageclass');
   $(document.body).animate({scrollTop: imageposition.offset().top}, 'fast');
  });

HTML:

<div class="container" style="border:2px solid #222;">
  <img class="imageclass" style="width:100px;height:100px" src ="image.jpg">
  <div class="slider2"><a href="#">Hi</a></div>
  <div class="internal" style="display: block;">Text<p></p></div>
</div>

<div class="container" style="border:2px solid #222;">
  <img class="imageclass" style="width:100px;height:100px" src ="image.jpg">
  <div class="slider2"><a href="#">Hi</a></div>
  <div class="internal" style="display: block;">Text<p></p></div>
</div>
..............

JS:

$('.slider2').click(function(e) {
 e.preventDefault();      
 $(this).next(".internal").load($(this).data("ship"));
        $('.internal').slideUp('normal');

        if ($(this).next().is(':hidden') === true) {
            $(this).addClass('on');
            $(this).next().slideDown('normal'); 
        }
     var imageposition = $(this).closest('.imageclass');
    $(document.body).animate({scrollTop: imageposition.offset().top}, 'fast'); 

 });
 $('.internal').hide();

Answer 1

这里至少有几个问题

1. $(this).closest('.imageclass')不选择 <a> 的前一个同级图像
2. 即使您获得了所需的图像，当您的滚动代码运行时，该图像还没有放置到其最终位置。
3. 使用 $(document.body)滚动窗口(我自己对此表示怀疑)

下面的代码选择正确的图像元素，在正确的时刻获取滚动顶部，并滚动 html, body使用工作语法。

$(function () {
    $('.slider2').click(function (e) {
       e.preventDefault();
       $(this).next(".internal").load($(this).data("ship"));
       $('.internal').slideUp('normal');
       var imageposition = $('.imageclass', $(this).closest('.container'));
       if ($(this).next().is(':hidden') === true) {
         $(this).addClass('on');
         $(this).next().slideDown('normal', function () {
            $('html, body').animate({scrollTop: $(imageposition).offset().top})
         });
      }
   });
   $('.internal').hide();
});