Ajax 内容加载后滚动到顶部答案

【问题标题】：Scroll to top after Ajax content loadAjax 内容加载后滚动到顶部
【发布时间】：2012-04-04 08:59:39
【问题描述】：

有没有办法让页面在内容加载后自动滚动到顶部（通过 Ajax）？

这是我用于显示内容的代码：

$(document).ready(function () {
    var my_layout = $('#container').layout();
    $("a.item_link").click(function () {
        $("#loader").fadeIn();

        feed_url = $(this).attr("href");
        $.ajax({
            type: "POST",
            data: "URL=" + feed_url,
            url: "view.php",
            success: function (msg) {
                $("#view-area").html(msg);

                $("#loader").fadeOut();
            }
        });
        return false;
    });
});

那么在“view-area”加载了它的内容之后，我可以让页面自动滚动到顶部吗？

【问题讨论】：

标签： php jquery html ajax

【解决方案1】：

如果没有回调，尝试绑定事件监听：

document.addEventListener(
    "load",
    function(event) {
        event.composedPath().forEach(function(dom) {
            if (dom.classList && dom.classList.value === "classOfLoadedContent") {
                $(".div-to-be-scrolled").scrollTop($(".content").innerHeight());
            }
        });
    },
    true
);

【讨论】：

【解决方案2】：

只需使用滚动功能

scrollTo(0);

如果你想要 jquery，那么 here is a good example with smoothing :)

来自链接：

$('html, body').animate({ scrollTop: 0 }, 0);
//nice and slow :)
$('html, body').animate({ scrollTop: 0 }, 'slow');

把它放在你的代码中

...
        success: function (msg) {
            $("#view-area").html(msg);
            $("#loader").fadeOut();
            //Put code here like so
            $('html, body').animate({ scrollTop: 0 }, 0);
        }

【讨论】：

谢谢，效果很好！我只是将代码放在 $("#view-area").html(msg); 之间和 $("#loader").fadeOut();它奏效了！谢谢。
为什么它不能在其他选择器上工作？像 $('.section').animate({ scrollTop: 0 }, 0);但是 html，body 选择器工作。

【解决方案3】：

所有 ajax 请求都有一个回调参数，所以请使用scrollTop(0)。查看 jQuery 文档以了解如何使用 ajax 回调。

【讨论】：

【解决方案4】：

你可以$(window).scrollTop(0);

【讨论】：

太棒了！奇迹般有效！非常棒的提示！：D