jQuery scrollTop 未触发

Question

我有一些这样的标记：

<div id="landing">
    <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>
</div>

<header id="header">
    <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>
    <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>
    <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>
</header>

我正在尝试获取它，以便在单击 #landing 中的 <p> 元素时，jQuery 将页面向下滚动到 #header 元素.

根据 jQuery 文档，我原以为它会像这样简单：

$('#landing p').click(function() {
    $('#header').scrollTop(250);
});

但这似乎根本不起作用。另外，我查看的所有其他使用 scrollTop 方法的线程（包括对我之前/类似线程的一些回答）似乎都使用了更复杂的代码。所以我想也许我需要这样的东西：

$('#landing p').bind('click', function(e) {
    try {
        e.preventDefault();
        target = this.hash;
        $('#header').animate({
            scrollTop: 0
        }, 150);
    } catch (error) {
        alert('error - ' + error);
    }
});

但这也不管用。我在控制台中没有收到任何错误消息，但事件似乎不会触发。我已经用一个简单的警报语句测试了它，效果很好，只是我无法让它滚动

Answer 1

我想您可能正在寻找这样的东西？

$('#landing p').click(function(){
    var headerOffset=$('#header').offset();
    $('html,body').animate({
        scrollTop:headerOffset.top
    });
});

jQuery scrollTop 未触发

jQuery scrollTop Not Triggering

javascript

jquery

jquery-plugins

scrollto

scrolltop