Jquery滚动到不滚动

Question

我正试着这样做，当用户点击链接时它会向下滚动，以便蓝色区域不在页面顶部。

这是我的jsFiddle

我认为代码会是这样的：

$("#scroll").click(function() {
    $('html, body').animate({
        scrollTop: $("#jumbo").offset().bottom
    }, 2000);
});

然而它似乎不起作用。谁能告诉我哪里出错了？

Answer 1

offset()仅公开top和left属性。要获得最低点，您需要将高度添加到top：

$('html, body').animate({
    scrollTop: $(".jumbo").offset().top + $(".jumbo").height()
}, 2000);

Updated fiddle

另请注意，在您的示例中，jumbo是一个类，而不是id。

Answer 2

我认为您正在寻找滚动到第一个.midheight div：

$("#scroll").click(function() {
    $('html, body').animate({
        scrollTop: $(".midheight:eq(0)").offset().top
    }, 2000);
});

<强> Updated Fiddle

Answer 3

你不需要为此使用jQuery，你可以简单地使用锚点。

锚是链接，但有哈希，例如：

<a name="scroll_down"></a>

然后可以使用普通链接对其进行定位，但是如下所示：

<a href="#scroll_down"></a>

点击该链接会将页面向下滚动到HTML中放置锚点的位置。

对于您所追踪的慢动画，您可以查看here并使用他的代码。所有这些都归功于他的代码，效果很好。

这是您更新的fiddle

关于这一点的好处是，你可以很容易地使用它与你在小提琴中的每个“功能”的链接，并在每个上面有一个锚，这样用户可以轻松向下滚动到适当的，没有你需要重复jQuery代码。