How can I scroll down the page so that a designated element is at the top?

Question

I have this jQuery that gets html data back from a Controller method, and adds it to an up-until-then-empty element:

$("#btnViewList").click(function () {
    $.ajax({
        type: "GET",
        url: '@Url.Action("GeneratePDFOfReportFutures", "GenerateScheduledRptsPDF")',
        success: function (retval) {
            $("#tableshell").append($(retval));
            $("html, body").animate({ scrollTop: $(document).height() }, 1000);
        },
        error: function () {
            alert('error in btnViewList');
        }
    }); 
}); 

The element being inflated is simply:'

<div id="tableshell">   
</div>

After that data is appended, I want to scroll down the page so that the dynamically added html is visible without the user having to manually scroll down the page. I found code jQuery Scroll To bottom of the page to move to the bottom of the page, and it works, but I want the first part of the newly-added html to be visible at the top of the area visible after scrolling.

How is that accomplished?

Answer 1

Have you tried this code

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

pls let me know if this worked for you

Answer 2

It's easy as pie, using "plain old" Javascript:

document.getElementById("tableshell").scrollIntoView();

For whatever reason, the jQueryified version:

$("#tableshell").scrollIntoView();

...does not work.

So my jQuery is now:

$("#btnViewList").click(function () {
    $.ajax({
        type: "GET",
        url: '@Url.Action("GeneratePDFOfReportFutures", "GenerateScheduledRptsPDF")',
        success: function (retval) {
            $("#tableshell").append($(retval));
            document.getElementById("tableshell").scrollIntoView();
        },
        error: function () {
            alert('great oogly moogly - Zappa missed Mother's day!');
        }
    });
});