加载Ajax内容后滚动到顶部

时间:2012-03-19 20:37:44

标签: php jquery html ajax

无论如何我可以这样做,所以页面会在内容加载后自动滚动到顶部(通过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'加载了它的内容后,我可以让页面自动滚动到顶部吗?

4 个答案:

答案 0 :(得分:24)

只需使用滚动功能

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);
        }

答案 1 :(得分:1)

您可以执行$(window).scrollTop(0);

答案 2 :(得分:1)

所有ajax请求都有一个回调参数,因此请使用scrollTop(0)。 查看有关如何使用ajax回调的jQuery文档。

答案 3 :(得分:0)

如果没有回调,请尝试绑定事件侦听器:

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
);