在asp.net中，如何在页面回发后保持页面滚动位置

本文关键字：滚动 位置 net asp | 更新日期: 2023-09-27 18:08:28

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <meta http-equiv="refresh" content="4" />   
 <script type="text/javascript">
    var xPos1, yPos1;
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_pageLoading(pageLoadingHandler);
    prm.add_pageLoaded(pageLoaded);
    function pageLoaded(sender, args) {
        $get('<%=Panel_Users.ClientID %>').scrollLeft = xPos1;
        $get('<%=Panel_Users.ClientID %>').scrollTop = yPos1;
    }
    function pageLoadingHandler(sender, args) {
        xPos1 = $get('<%=Panel_Users.ClientID %>').scrollLeft
        yPos1 = $get('<%=Panel_Users.ClientID %>').scrollTop;
    }
    </script>
</asp:Content>

不工作，我哪里出错了

    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"  />    
<div style="height: 504px; width: 941px;">
                 <asp:Panel runat="server" ID="Panel_Users" ScrollBars="Auto" Style="z-index: 1; left: 748px;
                     top: 621px; position: absolute; height: 250px; width: 287px">
                     <asp:UpdatePanel UpdateMode="Conditional" ID="UpdatePanel1" runat="server">
                         <ContentTemplate>
                             <asp:GridView ID="Grid_UserTable" runat="server" Style="z-index: 1; left: 2px; top: 5px;
                                 position: absolute; height: 152px; width: 243px" BorderColor="#666666" AutoGenerateColumns="False"
                                 OnRowDataBound="MyGrid_RowDataBound">
                                 <Columns>
                                     <asp:TemplateField HeaderText="Status">
                                         <ItemTemplate>
                                             <asp:Image ID="Status" runat="server" />
                                         </ItemTemplate>
                                     </asp:TemplateField>
                                     <asp:BoundField DataField="TimeReceived" HeaderText="TimeReceived" InsertVisible="False"
                                         ReadOnly="True" SortExpression="TimeReceived" />
                                     <asp:BoundField DataField="TimeRead" HeaderText="TimeRead" SortExpression="TimeRead" />
                                     <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                                 </Columns>
                             </asp:GridView>
                         </ContentTemplate>
                     </asp:UpdatePanel>
                 </asp:Panel>
             </div>

我试图使页面停留在相同的位置，当页面刷新后每5秒和页面去顶部。我尝试了页面MaintainScrollPositionOnPostback="真"。它没有工作，我尝试使用Ajax，但不知道如何使用它。有人能帮助我如何做到这一点与Ajax。

在asp.net中，如何在页面回发后保持页面滚动位置

在你的设计页面上尝试下面的代码，它对我来说很好。

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="frmName.aspx.vb" Inherits="frmName" MaintainScrollPositionOnPostBack = "true" %>

MaintainScrollPositionOnPostback只适用于IE。要做到这一点，您可以滚动自己的客户端脚本或在页面/表单的不同部分使用锚链接。

这里也有类似的问题:

MaintainScrollPositionOnPostback不工作-如何调试?

MaintainScrollPositionOnPostback不能使用javascript:__doPostBack

maintainScrollPositionOnPostback ="true"在web中设置后不能全局工作。配置，但在页面级别工作，我该怎么办?

<%@ Page MaintainScrollPositionOnPostback="true" %>作为页面声明将保持滚动位置为

对于听起来很糟糕的UI(页面每5秒刷新一次)，一个便宜的修复方法是在地址栏的URL中添加"#"和你想要保持在视图中的元素的id，但这会自动滚动到id链接元素的顶部

如果这是一个商业产品，而且你很着急，我建议你看看JQuery的ajax实现，把那些重载都去掉。

可以像这样简单的一行:

  $.ajax(
    {
      url:"/thisPath/requestPath",
      complete:function(data){
      //apply data (the http-response) to HTML
    }
  );

如果这对您来说很奇怪，它只是一个对象字面量被提供给JQuery对象ajax方法。分配给'complete'的函数在接收到http响应时触发，该响应作为参数'data'提供给函数，该参数建立在.ajax方法内部。

在后面的代码中试试:

protected void Page_Load(object sender, EventArgs e)
{
    if (Page.IsPostBack)
    {
        Page.MaintainScrollPositionOnPostBack = true;
    }
}

Posdata:我用c#试过了

从性能的角度来看，UpdatePanels非常糟糕。我会用jquery来做这件事，并完全避免回发。

$.ajax({
    url: "/path/to/url/that/returns/users",
    type: "POST",
    dataType: "json",
    data: {},
    success: function(data, status, xhttp)
    {
        var html = "<table>";
        for ( var i = 0; i < data.length; i++ )
        {
            html += "<tr>";
            html += "<td></td>"; // build up table cells
            html += "</tr>";
        }
        html += "</table>";
        $("#NameOfDivToPutTableIn").html(html);
    }
});

如果这是一个选项，根据本教程设置要读取的url:

http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

如果你不想使用jquery，你仍然可以使用MS AJAX，只是跳过那些更新面板。http://www.geekzilla.co.uk/view7b75c93e c8c9 - 4576 - 972 b - 2 - c3138dfc671.htm 

@{
    
}
<html>
<head>
<script type="text/javascript">
window.onload = function () {
   var div = document.getElementById("dvScroll");
   var div_position = document.getElementById("div_position");
    var position = parseInt(@Request.Form("div_position"));
    if (isNaN(position)) {
        position = 0;
    }
    div.scrollTop = position;
    div.onscroll = function () {
        div_position.value = div.scrollTop;
    };
};
</script>
</head>
<body>
<div id="dvScroll" style="overflow-y: scroll; height: 260px; width: 300px">
    1. This is a sample text
    <br />
    2. This is a sample text
    <br />
    3. This is a sample text
    <br />
    4. This is a sample text
    <br />
    5. This is a sample text
    <br />
    6. This is a sample text
    <br />
    7. This is a sample text
    <br />
    8. This is a sample text
    <br />
    9. This is a sample text
    <br />
    10. This is a sample text
    <br />
    11. This is a sample text
    <br />
    12. This is a sample text
    <br />
    13. This is a sample text
    <br />
    14. This is a sample text
    <br />
    15. This is a sample text
    <br />
    16. This is a sample text
    <br />
    17. This is a sample text
    <br />
    18. This is a sample text
    <br />
    19. This is a sample text
    <br />
    20. This is a sample text
    <br />
    21. This is a sample text
    <br />
    22. This is a sample text
    <br />
    23. This is a sample text
    <br />
    24. This is a sample text
    <br />
    25. This is a sample text
    <br />
</div>
<hr />
<form method="post">
<input type="hidden" id="div_position" name="div_position" />
<input type="submit" value="Cool" />
</form> 
</body>
</html>

你可以使用这个来保持回发后的滚动位置。

来源:http://www.aspsnippets.com/Articles/Maintain-Scroll-Position-of-DIV-on-PostBack-in-ASPNet.aspx

为其他挣扎于此的人。最简单的解决方案是保持整个窗口的滚动位置

  var xPos, yPos;
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (evt, args) {
        window.scrollTo(xPos , yPos);
    });

    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function (evt, args) {
        xPos = $(window).scrollLeft();
        yPos = $(window).scrollTop();
    });

开始和结束请求。在开始请求使用Jquery获取窗口滚动位置。最后请求滚动到那个位置。

这个问题在网上都有答案，我个人认为没有一个是有效的，对于我来说，Firefox会试图恢复以前的滚动位置(错误)，触发window.scroll事件，这将覆盖我的隐藏字段与错误的位置，我的scrollTo将然后读取。(我有gridviews来自回发，随后自动折叠一些行。)

所以这里有另一个解决这个问题的方法-我决定我只想在提交后恢复滚动位置，而不是刷新后，所以这是足够的:

ASPX页面:

<form runat="server" onsubmit="$('#hfScroll').val($(window).scrollTop()); return true;">
    <input type="hidden" id="hfScroll" value="0" />
Javascript: 

function restoreScroll()
{
    var position = parseInt($('#hfScroll').val());
    if (!isNaN(position)) {
        $(document).scrollTop(position);
    }
};
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(restoreScroll);

由于某些原因，在浏览器刷新时，我的隐藏输入没有重置为零，所以这有时确实表现得很奇怪。我很想知道是什么在做这件事，我认为是Firefox，因为它不会发生在IE上，但生命太短暂了[他说…]我下载了互联网上一半的内容，却花了几个小时在这上面[/p>

如果回复是由按钮引起的，您可以尝试:

ScriptManager.GetCurrent(Page).RegisterAsyncPostBackControl(button);

<pages maintainScrollPositionOnPostBack="true">
相关文章：