Question

我正在寻找一种简单有效的方法来获取浏览器垂直滚动条的位置并将其保存到ASP页面中的会话变量中。

我要做的是当用户更改页面时，我将滚动位置存储在会话变量中，这样当用户返回页面时，页面将滚动到它们的最后位置。

有办法做到这一点吗？我已经看到了在回发时保持滚动位置的例子，但没有做到我正在尝试做的事情:(

如果有人能指出正确的方向，我将不胜感激。

编辑：

好的，基于下面的例子，我注意到当用户点击gridview中的一行时，他们会导航到下一页，但我的事件处理程序永远不会被触发。这导致我怀疑滚动位置没有被保存，我猜这个表格没有被提交）

我的事件处理程序如下：

   Protected Sub save(ByVal sender As Object, ByVal e As EventArgs) Handles ScrollPosition.ValueChanged
      Session.Add("ScrollPosition", ScrollPosition.Value)
   End Sub

我认为最简单的方法是使用valueChanged事件来获取值并将其放入会话中

接下来我的脚本......我正在尝试根据我对Jquery的非常有限的知识来做到这一点！

<script type="text/javascript">
   $(function () {

      //Retrieve and use the existing scroll position from the hidden field 
      var scrollPosition = $('#<%= ScrollPosition.ClientID %>').val();
      $(window).scrollTop(scrollPosition);
      /*
      //Handle the main forms submit event and store the scroll position 
      $('#<%= form1.ClientID %>').submit(function () {
         var currentScrollPosition = $(window).scrollTop();
         $('#<%= ScrollPosition.ClientID %>').val(currentScrollPosition);
      });
      */
   });

   $(document).ready(function () {
      $("#gvTickets").click(function () {
         var currentScrollPosition = $(window).scrollTop();
         $('#<%= ScrollPosition.ClientID %>').val(currentScrollPosition);
      })
   });
</script>

脚本背后的想法是，当单击gvTickets中的一行时，将存储滚动位置，该位置应触发我的值更改事件处理程序

我没有收到任何错误，但我没有得到所期望的行为：（

同样在我的页面加载中我有：

如果不是IsPostBack那么

 If (Session("ScrollPosition") = Nothing) Then
    ScrollPosition.Value = 0
    Session("ScrollPosition") = 0
 Else
    ScrollPosition.Value = Session("ScrollPosition")
 End If

Answer 1

尝试在HiddenField控件中提交表单时存储滚动位置。

然后，您的代码中将出现HiddenField控件，因此您可以根据需要存储该值。

然后，您可以使用HiddenField控件中的值来设置页面加载时的滚动位置。

请参阅下面的示例（使用JQuery）：

<强>标记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!-- Set the path to JQuery here -->
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //Add some line breaks
            for (i = 0; i < 1000; i++) {
                $('body').prepend('<br/>');
            }

            //Retrieve and use the existing scroll position from the hidden field
            var scrollPosition = $('#<%= ScrollPosition.ClientID %>').val();
            $(window).scrollTop(scrollPosition);

            //Handle the main forms submit event and store the scroll position
            $('#<%= form1.ClientID %>').submit(function () {
                var currentScrollPosition = $(window).scrollTop();
                $('#<%= ScrollPosition.ClientID %>').val(currentScrollPosition);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div style="position:fixed;top:0px;left:0px;">
                <asp:HiddenField ID="ScrollPosition" runat="server" Value="0" />
                <asp:Button ID="Button1" runat="server" Text="Post Back" OnClick="Button1_Click" />
                <asp:Label ID="CurrentScrollPosition" runat="server"></asp:Label>        
            </div>
        </div>
    </form>
</body>
</html>

代码背后

protected void Button1_Click(object sender, EventArgs e)
{
    CurrentScrollPosition.Text = string.Format("Scroll position: {0}", ScrollPosition.Value);
}

修改（根据评论）

尝试处理窗口滚动事件，每当滚动位置发生变化时更新隐藏字段：

<script type="text/javascript">
    $(function () {

        $(window).scroll(function () {
            var currentScrollPosition = $(window).scrollTop();
            $('#<%= ScrollPosition.ClientID %>').val(currentScrollPosition);
        });

    });
</script>

修改

对我来说，以下代码在加载时将滚动位置隐藏字段设置为0。然后在随后的回发中将值存储在“ScrollPosition”会话变量中的隐藏字段中。

然后我可以将滚动位置打印到屏幕上。见下文：

在我的示例中触发回发的控件是一个Button，但是任何控件都可以启动回发，它仍然会以相同的方式运行。

protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //Default to 0 ScrollPosition.Value = "0"; //If ScrollPosition session variable is null, store the default //Else set the scroll position to the value stored in session. if (Session["ScrollPosition"] == null) { Session.Add("ScrollPosition", ScrollPosition.Value); } else { ScrollPosition.Value = Session["ScrollPosition"].ToString(); } } else { //On subsequent postbacks store the new scroll position Session.Add("ScrollPosition", ScrollPosition.Value); } OutputScrollPosition(); } private void OutputScrollPosition() { CurrentScrollPosition.Text = string.Format("Scroll position: {0}", Session["ScrollPosition"]); }

希望这有帮助。

保持浏览器滚动位置

1 个答案: