滚动到页面上的相同位置，具体取决于单击哪个元素

Question

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

例如：如果我单击某个人，我希望他们滚动到页面顶部。 因此，它们的图像将位于顶部，您可以阅读其描述。 当前，如果您单击底部图像，您将不会注意到该描述，因为它位于页面下方。

在这里提琴： 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演示

注意：另外，添加了float:left; 在.people p中将文本保留在左侧。

Answer 2

您可以使用jquery scrollTop并将此功能添加到click事件：

$('html, body').animate({
scrollTop: ($(this).offset().top - 5)
}, 1000); 

Answer 3

不错的小jQuery插件：

$.fn.animateScrollToElement = function(speed, marginTop) {
    marginTop = marginTop || 0;
    $('html, body').animate({
        scrollTop: $(this).offset().top - marginTop
    }, speed);
    return this;
}

用法：

// element                     speed, 'margin top'
$( this ).animateScrollToElement(1000, 20);

http://jsfiddle.net/sPLDh/11/

Answer 4

如果您使用锚点， href='#elementName'应该可以完成这项工作。 不过，这将立即到达那里。