維護大HTML頁面的滾動位置時，客戶端返回

Question

我服很長的html頁面（短電子書）

當客戶的回報，太麻煩，試圖找到準確的地方不放過由於長期html頁面。

有一個簡單的方法來自動保持滾動位置下一次，所以客戶端會自動返回到該頁面的頁面滾動到他離開的地方。 這需要是透明的，即不需要點擊以「存儲」滾動位置。

Answer 1

你總是可以使用onbeforeunload事件來檢查時，被關閉的窗口，並設置與當前位置的cookie。比每次加載頁面時都要檢查是否設置了該cookie。如果是 - 使用該值將用戶重定向到保存的位置。

更新

你應該明白，以使其發揮作用的概念。您可以閱讀關於cookie以及如何在javascript here中與它們交互的信息。該鏈接包含一個現場示例。

的onunload的和onbeforeunload是您可以使用您的網頁時被關閉，以檢測JavaScript事件。你應該谷歌他們是什麼以及如何使用它們。

您可以檢查this stack-overflow question以獲得如何跳轉到特定偏移量的答案，並可登錄this one查看如何檢索它。

我給你所有的拼圖，這取決於你把它們放在一起。

Answer 2

步驟很簡單，但解決這一問題取決於你的應用程序實現，您可以：

• 檢索當前的滾動位置，你可以使用：

  window.pageYOffset

• 存儲位置，這有兩部分，時間和地點：

  • 你可以選擇來存儲數據，當窗口關閉，或每次用戶滾動，或在設定的時間間隔......

  • 的「裏」，這取決於你的應用程序，你可能想其存儲在一個cookie，本地存儲，服務器端（如果用戶需要登錄到閱讀電子書）...

• 恢復位置，當用戶返回時，通過檢索存儲的數據，並滾動到該位置使用

  window.scrollTo(0, position);

所以這裏真正的問題是，什麼時候和在哪裏存儲的位置，而取決於你的應用。

Answer 3

我製作了一個小的jquery插件，你可以包含這個功能而不用cookies等。在之前包括身體標籤的結尾。

<script type="text/javascript" src="/js/maintainscroll.jquery.min.js"></script> 
</body> 

https://github.com/evaldsurtans/maintainscroll.jquery.js