Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scroll to top after Ajax content load

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?

like image 881
Aaron Fisher Avatar asked Mar 19 '12 20:03

Aaron Fisher


2 Answers

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);
        }
like image 143
Justin Pihony Avatar answered Nov 09 '22 09:11

Justin Pihony


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

like image 3
Icarus Avatar answered Nov 09 '22 08:11

Icarus