Scroll to top after Ajax content load

Question

Is there anyway that I can make it so the page will automatically scroll to the top after the content has loaded (via Ajax)?

This is the code I have for displaying the content:

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

So after the 'view-area' has loaded its content can I make the page auto scroll to the top?

Justin Pihony · Accepted Answer · 2012-03-19T20:51:00.997

29

Just use the scroll function

scrollTo(0);

If you want the jquery, then here is a good example with smoothing :)

From the link:

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

To put it in your code

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

edited Mar 19 '12 at 20:51

answered Mar 19 '12 at 20:43

Justin Pihony

66,056
18
147
180

Thanks, this has worked perfectly! I just put the code in between $("#view-area").html(msg); and $("#loader").fadeOut(); and it worked! Thanks. – Aaron Fisher Mar 19 '12 at 20:53
Why it's not working on other selector? Like $('.section').animate({ scrollTop: 0 }, 0); But html, body selector working. – Jilani A May 19 '21 at 07:08

score 3 · Answer 2 · answered Mar 19 '12 at 20:46

3

You can do $(window).scrollTop(0);

answered Mar 19 '12 at 20:46

Icarus

63,293
14
100
115

Awesome! Works like a charm! Thnx for the great hint!:D – drpelz Aug 06 '13 at 20:53

score 1 · Answer 3 · answered Mar 19 '12 at 20:49

1

All ajax requests have a callback argument so use scrollTop(0). Check the jQuery documentation on how to use ajax callbacks.

answered Mar 19 '12 at 20:49

PaulKoeck

134
3

score 0 · Answer 4 · answered Jun 14 '20 at 11:40

If you have no callback, try to bind an event listener:

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

Scroll to top after Ajax content load

4 Answers4

Linked

Related