Question

我有一些JQuery通过Ajax更新我的页面内容（通过一些子表内容进行分页），我想让页面跳转到＃34; （滚动）回到刚刚更新内容的部分的顶部。我找到了一些代码来尝试执行滚动，但它只是回到页面顶部而不是特定元素：

<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 Partial View中，当点击分页链接时，它会自动重新加载到主剃须刀视图中 - 这样可以正常工作。我在这个局部视图的顶部附近有以下锚点：

<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触发时再次渲染锚点？我尝试将它移动到主剃刀视图中，但是jQuery代码似乎根本无法找到它（尽管事实应该在DOM中？）

我可以看到锚点在局部视图中何时返回，当警报未被重新启动时它确实找到了元素并返回一个负数，这是因为它是我当前偏移的位置？那么页面是否会尝试滚动到那个绝对点，而不是回到我想要的位置？

Answer 1

DEMO - .animate()效果很好。

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

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

Jquery滚动到元素只是到页面顶部

1 个答案: