Jquery 滚动到元素刚到页面顶部

Question

我有一些 JQuery 通过 Ajax 更新我的页面内容（通过一些子 table 内容分页）我希望页面 "jump" （滚动）回到内容刚刚更新的部分的顶部。我找到了一些代码来尝试执行滚动，但它只会直接返回到页面顶部而不是特定元素：

<script type="text/javascript">
    $(document).ready(function() {
        $(".page-number").on("click", function() {
            var page = parseInt($(this).html());
            $.ajax({
                url: '@Url.Action("ProductReview")',
                dataType: 'html',
                data: {
                    "id": @Model.Product.ProductID,
                    "page": page
                },
                success: function (data) {
                    $("#review-list").html(data);
                    $("#page-number-"+ page).addClass("selected");
                    //location.hash = "#prodreviews";
                    scrollToAnchor("prodreviews");
                }
            });
        });
        // scroll handler
        var scrollToAnchor = function(id) {
            // grab the element to scroll to based on the name
            var elem = $("a[name='"+ id +"']");
            // if that didn't work, look for an element with our ID
            if (typeof(elem.offset()) === "undefined") {
                elem = $("#"+id);
            }
            //alert(elem.offset().top);
            // if the destination element exists
            if (typeof(elem.offset()) !== "undefined") {
                // do the scroll
                $('html, body').animate({
                    scrollTop: elem.offset().top
                }, 1000);
            }
        };
    });
</script>

这是在 Asp.net MVC 局部视图中，当单击分页链接时，它会自行重新加载到主 razor 视图中 - 工作正常。我在这个部分视图的顶部附近有以下锚点：

<a name="prodreviews" id="prodreviews"></a>

我在同一个局部视图中的分页链接是：

<div class="pagewrapper">
@for (int i = 1; i <= Model.Reviews.NumberOfPages; i++)
{
    <a class="page-number" id="page-number-@i" href="javascript:void(0)">@i</a>
}
</div>

是不是在Ajax触发的时候又重新渲染了anchor？我尝试将它移到剃刀主视图中，但 jQuery 代码似乎根本找不到它（尽管事实应该在 DOM 中？）

我可以看到锚点何时回到局部视图中以及何时取消警报它确实找到了元素和 return 一个负数，这是因为它是我所在位置的偏移量现在？然后页面是否试图滚动到那个绝对点，而不是回到我想要的位置？

Answer 1

DEMO — .animate() 工作正常。

确保页面上存在 #prodreviews 元素，并为其添加一些 CSS 样式，以便您可以在页面上直观地识别它。此外，如果页面在 #prodreviews 标记上方包含 floating elements，请确保它是 cleared。

在您的网络浏览器中打开开发人员工具并检查控制台是否有其他 JavaScript 错误，这些错误可能会阻止此特定代码运行。

Jquery 滚动到元素刚到页面顶部

Jquery scroll to element just goes to top of page

jquery

asp.net-ajax

scrollto