如何向下滚动页面，以便将指定的元素放在顶部？

Question

我有这个jQuery从Controller方法获取html数据，并将其添加到up-until-then-empty元素中：

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

膨胀的元素很简单：

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

在添加了该数据之后，我想向下滚动页面，以便动态添加的html可见，而用户不必手动向下滚动页面。 我发现代码jQuery滚动到页面底部移动到页面 底部 ，并且可以使用，但是我希望新添加的html的第一部分在滚动后可见区域的顶部可见。

如何完成的？

Answer 1

您是否尝试过此代码

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

请让我知道这是否对您有用

Answer 2

使用“纯老式” Javascript，就像馅饼一样容易：

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

出于任何原因，jQueryified版本：

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

...不起作用。

所以我的jQuery现在是：

$("#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!');
        }
    });
});