Question

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

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

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() - 元素滚动条的位置（window / div /可滚动的任何东西）。

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

<强> JSFiddle Demo

注意：另外，在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'应该可以胜任。不过，这只会立刻去那里。

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

4 个答案: