Question

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

这个无效。

  $('.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

你至少有几个问题

$(this).closest('.imageclass')未选择<a>
即使您获得了所需的图像，滚动代码运行的那一刻，图像也没有将其置于最终位置。
使用$(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();
});

Answer 2

滚动功能的工作方式有点问题，因为活动.container的位置会相对于其他容器（当处于活动状态和非活动状态时）发生变化。

此外，您不应该寻找最接近的位置，而是寻找其父元素。

请看一下我的代码：CSS

.slider2 {
    margin:40px;
}
.internal p {
    padding:5px;
}
.internal h3 {
    text-align:center;
}
.container {
    position: relative;
}

您可能需要寻找一种方法，以检测非活动容器的高度，因为我将其作为静态值。

JS：

$('.slider2').click(function (e) {
    e.preventDefault();
    $(this).next(".internal").load($(this).data("ship"));
    var containerHeight = 205;
    var containerIndex = $(this).offsetParent().index();
    $('.internal').slideUp('normal');

    if ($(this).next().is(':hidden') === true) {
        $(this).addClass('on');
        $(this).next().slideDown('normal');
    }

    var scrollPosition = containerHeight * containerIndex;
    $('body').animate({
        scrollTop: scrollPosition
    }, 'fast');

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

单击时滚动到同级元素

2 个答案: