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

夸大的元素只是：＆＃39;

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

在追加数据后，我想向下滚动页面，以便动态添加的html可见，而无需用户手动向下滚动页面。我发现代码jQuery Scroll To bottom of the page移动到页面的底部，它可以工作，但我希望新添加的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!');
        }
    });
});

如何向下滚动页面以使指定的元素位于顶部？

2 个答案: