【问题标题】:Prevent page scrolling after postback and maintain position回发后防止页面滚动并保持位置
【发布时间】:2012-04-25 11:18:39
【问题描述】:

我正在根据用户在 CheckBoxList 中的检查来累加用户的分数。每次用户选中一个框时,都会将一个值 X 添加到总分中。当用户取消选中某个框时,会从总分中减去一个值 X。这里没有问题。

我遇到的问题是使用 CheckBoxList 属性中的 AutoPostback 选项会强制页面加载回顶部,而不是停留在用户所在的位置,这意味着他们必须在每次检查后继续向下滚动/取消选中。有没有办法防止这种情况发生?

【问题讨论】:

    标签: javascript c# asp.net vb.net


    【解决方案1】:

    Ajax 解决方案

    当然,最好的方法是使用 Ajax 调用。页面根本没有移动,数据只是更新了。更新面板是一种快速、简单的启动解决方案 - 不是最佳解决方案,但如果您有一个简单的页面,它是一个非常好的解决方案。

    第二种解决方案

    第二种解决方案是使用锚#。您设置了您希望它显示的点:

    <a name="PointA"></a>
    

    您使用该锚点将页面称为page.aspx#PointA

    第三种解决方案

    第三种解决方案是使用 ASP.NET 的内部 JavaScript 代码。在页面声明(顶部第一行)&lt;%@ Page MaintainScrollPositionOnPostback="true" %&gt;

    或在 web.config 上影响所有页面,&lt;pages maintainScrollPositionOnPostBack="true" /&gt;

    或以编程方式System.Web.UI.Page.MaintainScrollPositionOnPostBack = true; 按需打开和关闭。

    使用 jQuery

    ​​>

    只需两行 jQuery 代码,您就可以在回帖后在您想要移动的点上制作漂亮的动画:

    var WhereToMove = jQuery("#PointA").position().top;
    jQuery("html,body").animate({scrollTop: WhereToMove }, 1000);
    

    然后你将页面移动到这个元素:

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

    谷歌搜索

    最后,您可以使用自定义 JavaScript 代码来做同样的事情。网上有很多关于这个的示例:https://www.google.com/?q=asp.net+remain+position

    【讨论】:

    • 效果惊人!谢谢!
    • 关于 3d 解决方案(内置 asp.net),我应该将该行准确地放在 web.config 文件中的哪个位置?我似乎找不到合适的位置让它工作。我只需要 web config 中的那一行,还是页面本身的另一行和 web.config 中的一行?
    • @user1884155 web.config 是一个全局的,如果你把它放在那里,那么就像在所有页面上添加它一样。您可以通过仅将其添加到页面并使其工作来进行测试。
    • 我弄清楚了它为什么不起作用:我的页面从不滚动,它是页面内的一个子面板,它可以滚动。我猜我必须使用 javascript。
    【解决方案2】:

    在回发后防止页面滚动的两种最佳方法是: 将其放入 web.config 中。
    1) 页面维护ScrollPositionOnPostBack="true"

    很多人质疑这条线的确切位置在哪里。 所以放置这条线的确切位置是

    <system.web>
    <pages maintainScrollPositionOnPostBack="true">
    </system.web>
    

    注意:这将适用于整个解决方案,它会阻止每种形式 滚动

    2) 第二种方法是将此行放在 aspx 文件的顶部

    MaintainScrollPositionOnPostback=true

    喜欢这个

    <%@ Page MaintainScrollPositionOnPostback=true Language="C#" AutoEventWireup="true" CodeBehind="xx.aspx.cs" Inherits="xx.Global" %>
    

    注意:这将适用于您要阻止的特定形式。

    【讨论】:

      【解决方案3】:

      我能想到三种可能的方法:

      1. 在应该禁用滚动的页面上,将 Page ("") 指令中的属性 MaintainScrollPositionOnPostback 设置为 true,即 &lt;%@ Page MaintainScrollPositionOnPostback=true ...other settings... &gt; 应该出现在顶部aspx 页面的

      2. 对于网站中的所有页面,在 web.config 中添加以下行: &lt;pages MaintainScrollPositionOnPostback=true&gt;

      3. 合并 AJAX 查询

      【讨论】:

        【解决方案4】:

        当你想停止滚动和页面刷新时MaintainScrollPositionOnPostback="true"标签是最重要的。

        【讨论】:

          【解决方案5】:

          借助 runat 标签,可以在 .NET 中以编程方式引用 HTML 标签。

          只需在 HTML 中给 body 标记一个 runat="server" 和一个 id="body" 或任何你想在代码中引用它的东西(我将使用 body 作为示例)。

          然后你可以像这样在代码中添加/修改标签的属性:

          Body.Attributes.Add("scroll", "no")
          

          将代码放在页面加载中。

          【讨论】:

            【解决方案6】:

            将这一行放在 webconfig 文件中:

            <pages maintainScrollPositionOnPostBack="true">
            

            【讨论】:

            • 你的答案重复了this 3年前发布的答案。
            【解决方案7】:

            你可以重写window的“scrollTo”方法并且在其中什么都不做,所以updatePanel设置页面滚动位置的尝试会失败:)

            function scrollTo(x, y) {
            }
            

            【讨论】:

              【解决方案8】:

              MaintainScrollPositionOnPostback 在 chrome 中并不总是有效,有时会导致回发所需的逻辑出现问题。这是一个简单的javascript代码,相当于MaintainScrollPositionOnPostback。

                  window.onload = function () {
                      var scrollY = parseInt('<%=Request.Form["scrollY"] %>');             
                      if (!isNaN(scrollY)) {
                          window.scrollTo(0, scrollY);
                      }
                  };
                  window.onscroll = function () {
                      var scrollY = document.body.scrollTop;
                      if (scrollY == 0) {
                          if (window.pageYOffset) {
                              scrollY = window.pageYOffset;
                          }
                          else {
                              scrollY = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
                          }
                      }
                      if (scrollY > 0) {
                          var input = document.getElementById("scrollY");
                          if (input == null) {
                              input = document.createElement("input");
                              input.setAttribute("type", "hidden");
                              input.setAttribute("id", "scrollY");
                              input.setAttribute("name", "scrollY");
                              document.forms[0].appendChild(input);
                          }
                          input.value = scrollY;
                      }
                  };
              

              【讨论】: