javascript - 根据单击的元素滚动到页面上的相同位置

Question

是否可以将我的 div 标题滚动到多个 div 的页面顶部？

例如:如果我点击一个人，我希望他们滚动到页面顶部。所以他们的形象会在顶部，你可以阅读他们的描述。目前，如果您单击底部图片，您不会注意到描述，因为它位于页面下方。

在这里 fiddle : http://jsfiddle.net/sPLDh/5/

HTML:
<p>Our people Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>


<div class="people">

    <div class="person">
        <img src="http://placehold.it/150x150" />
            <h2>John doe</h2>
    </div>
    <div class="person">
        <img src="http://placehold.it/150x150" />
        <h2>Peter Pan</h2>
    </div>
    <div class="person">
       <img src="http://placehold.it/150x150" />
        <h2>Sally Hills</h2>
    </div>

    <p>John Doe is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <p>Peter Pan is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <p>Sally Hills is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <div class="person">
        <img src="http://placehold.it/150x150" />
            <h2>Betty Boo</h2>
    </div>
    <div class="person">
        <img src="http://placehold.it/150x150" />
        <h2>Sm Hunt</h2>
    </div>
    <div class="person">
       <img src="http://placehold.it/150x150" />
        <h2>Paula Walls</h2>
    </div>

    <p>Betty Jones Doe is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <p>Sam Hunt is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <p>Paula Walls is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

</div>

Answer 1

试试这个:

$('.person img').click(function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
    $('html,body').animate({scrollTop: $(this).offset().top},'slow');
    var index = $('.person img').index(this);
    $('.people p:visible').fadeOut('fast','linear').promise().done(function() {
        $('.people p:eq('+index+')').fadeIn('fast','linear');
    });
});

解释:

scrollTop() - 元素滚动条的位置(窗口/div/任何可滚动的)。

$("#element").offset().top - 元素相对于页面的位置。

JSFiddle Demo

注意:此外，在 .people p 中添加了 float:left; 以使文本保持在左侧。