Question

我试图在用户点击我的ASP.NET按钮后发生“页面滚动动画”。

非常简单的方法：

String script = "<script type=\"text/javascript\">" + "\n" +
                    "$(document).ready(function() {" + "\n" +
                        "var destination = $('#" + lblMessage.ClientID + "').offset().top;" + "\n" +
                        "alert($('html, body').scrollTop());" + "\n" +
                        "$('html, body').animate({ scrollTop: destination-20}, 500 );" + "\n" + 
                    "});" +
                "</script>";
ClientScript.RegisterClientScriptBlock(this.GetType(), "scrollToMessage", script);

这一切都有效，除了一件事。我的按钮位于页面折叠下方，因此用户必须向下滚动才能单击它。一旦他点击它，我的代码后面会做一些Business的东西，然后注册javascript滚动页面“从它到哪里到我的标签所在的位置”（这只是位置零点以下。但这不是正在发生的事情。我的javascript代码在ASP.NET维护滚动位置之前执行，因此滚动动画从零到我的标签位置，而不是从我的按钮位置到我的标签位置。

所以这个可爱的重点就在窗外。

那么我怎么能解决这个问题，我猜测ASP.NET的MaintainScrollPositionOnPostback javascript是在我的document.ready之后执行的，我可以简单地尝试延迟它，理想情况是在.NET滚动调整后“排队”它。但我不知道该怎么做。

有人有过类似的问题吗？任何提示？

// ### BEGIN SOLUTION ###

只需手动调用ASP.NET的WebForm_RestoreScrollPosition（）即可。干净的结果。

String script = "<script type=\"text/javascript\">" + "\n" +
                    "$(document).ready(function() {" + "\n" +
                        "if (typeof(WebForm_RestoreScrollPosition) == 'function') {" + "\n" +
                            "WebForm_RestoreScrollPosition();" + "\n" +
                        "}" + "\n" +
                        "var destination = $('#" + lblMessage.ClientID + "').offset().top;" + "\n" +
                        "$('html, body').animate({ scrollTop: destination-20}, 500 );" + "\n" +
                    "});" +
                "</script>";
ClientScript.RegisterClientScriptBlock(this.GetType(), "scrollToMessage", script);

// ### END SOLUTION ###

谢谢！

Answer 1

在页面中的Page指令中设置MaintainScrollPositionOnPostback="false"以禁用回发时的默认页面滚动。然后你的代码应该根据逻辑滚动页面。

Answer 2

只需手动调用ASP.NET的WebForm_RestoreScrollPosition（）即可。干净的结果。

String script = "<script type=\"text/javascript\">" + "\n" +
                "$(document).ready(function() {" + "\n" +
                    "if (typeof(WebForm_RestoreScrollPosition) == 'function') {" + "\n" +
                        "WebForm_RestoreScrollPosition();" + "\n" +
                    "}" + "\n" +
                    "var destination = $('#" + lblMessage.ClientID + "').offset().top;" + "\n" +
                    "$('html, body').animate({ scrollTop: destination-20}, 500 );" + "\n" +
                "});" +
            "</script>";
ClientScript.RegisterClientScriptBlock(this.GetType(), "scrollToMessage", script);

如何在asp.net MaintainScrollPositionOnPostback之后在页面滚动上正确使用jquery.animate

2 个答案: