2011-10-10 69 views
0

我正在尋找一種簡單而有效的方式來獲得瀏覽器垂直滾動條的位置並將其保存到ASP頁面中的會話變量中。堅持瀏覽器滾動位置

我想要做的是當用戶更改頁面我已將滾動位置存儲在會話變量中,以便當用戶返回頁面時頁面將滾動到其最後位置。

有沒有辦法做到這一點?我見過堅持滾動位置上回傳,但沒有還沒有做什麼,我試圖做:(

如果任何人都可以點我在正確的方向ID感激的例子

編輯:

好吧,所以根據下面的例子,我注意到,當用戶點擊我的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 

回答

2

嘗試存儲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"]); 
} 

希望這會有所幫助。

+0

感謝您的回覆,它給了我一個開始的地方,即時通訊還不完全,儘管如此,我已經根據您的回答更新了我的原始帖子。 – Purplegoldfish

+0

乾杯,這種方法看起來更好,但我仍然不會調用ScrollPosition.ValueChanged的事件處理函數。我不知道爲什麼這是真的發生,因爲我也沒有錯誤:( – Purplegoldfish

+1

其原因可能是因爲隱藏的字段正在(js)代碼中更新,而不是生成引發更改的服務器端事件所需的關鍵事件。我不確定這是存儲滾動位置的最佳方法,但是由於隱藏字段的更新頻率,每當頁面回傳(在頁面加載事件中)時,爲什麼不在會話中存儲滾動位置? – jdavies