如何使用JavaScript滚动到页面顶部?滚动条立即跳到页面顶部也是可取的,因为我不希望实现平滑滚动。


当前回答

滚动到带有动画的页面顶部:

window.scrollTo({ top: 0, behavior: 'smooth' });

其他回答

你可以尝试在这个Fiddle中使用JShttp://jsfiddle.net/5bNmH/1/

在页脚中添加“转到顶部”按钮:

<footer>
    <hr />
    <p>Just some basic footer text.</p>
    <!-- Go to top Button -->
    <a href="#" class="go-top">Go Top</a>
</footer>

许多用户建议同时选择html和body标签以实现跨浏览器兼容性,如下所示:

$('html, body').animate({ scrollTop: 0 }, callback);

如果你指望回调只运行一次,这可能会让你绊倒。它实际上会运行两次,因为您选择了两个元素。

如果这对你来说是个问题,你可以这样做:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    $('body').animate({ scrollTop: 0 }, callback);
}

这在Chrome$('html')中有效的原因。scrollTop()返回0,但在其他浏览器(如Firefox)中无效。

如果滚动条已经位于顶部,您不想等待动画完成,请尝试以下操作:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, callback);
        return;
    }

    callback();
}

您可以使用javascript的内置函数scrollTo:

函数滚动(){window.scrollTo({顶部:0,行为:“平滑”});}<button onclick=“scroll”>滚动</button>

所有这些建议都适用于各种情况。对于通过搜索找到此页面的人,也可以尝试一下。JQuery,没有插件,滚动到元素。

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

尝试以下代码:

$('html, body').animate({
    scrollTop: $("div").offset().top
}, time);

div=>要移动滚动的Dom元素。

时间=>毫秒,定义滚动速度。