點擊滾動到兄弟元素

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

您已經至少兩個問題在這裏

1. $(this).closest('.imageclass')不選擇是圖像以前的兄弟姐妹<a>
2. 即使你得到了你想要的圖像，當你的滾動代碼運行的時候，圖像還沒有擺到最後的位置。
3. 使用$(document.body)滾動窗口（我懷疑它自己）

下面的代碼選擇正確的圖像元素，在得到適時scrollTop的，並使用工作語法滾動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();