Question

假设我有一堆盒子，每个盒子底部都包含“滚动到顶部”链接。感谢各种答案中发布的代码，我能够很好地完成滚动工作：

<div class="box" style="height: 500px;">
    <p>some tall box</p>
    <span class="scroll-link">scroll to top of box</span>
</div>

$('.scroll-link').on('click', function () {

    var $parent = $(this).parent();
    $('html, body').animate({
        scrollTop: $parent.offset().top
    }, 'slow');

});

http://jsfiddle.net/L1d394ev/5/

然而，我还有一件事需要做，那就是我坚持的地方：如果框中的顶部不可见，我只想滚动。（准确地说，太高可见。）

我已尝试在this answer中发布的代码 - 如果您取消注释if，这在我的JSfiddle中很明显 - 但这似乎完全禁用了滚动。

我想我需要做的是检查元素的顶部是否太高而不可见，但是如何做到这一点，我不知道。

Answer 1

您的问题是计算偏移的方式：

$('.scroll-link').on('click', function () {
    var $parent = $(this).parent();
    // Get the offset alone
    var offset = $parent.offset().top;
    // If the offset is less than the scroll position
    if (offset < $(window).scrollTop()) {
        $('html, body').animate({
                      // reuse your 'offset' variable instead of calculating it again
            scrollTop: offset
        }, 'slow');
    }
});

jQuery - 仅当顶部不可见时滚动到元素的顶部

1 个答案:

Updated JS Fiddle Demo