更改主體高度後保持滾動位置

我正在處理具有兩種狀態的頁面：編輯模式和正常模式。用戶通過點擊切換按鈕在這些狀態之間切換。觸發編輯模式爲頁面添加更多元素（按鈕等），從而強制元素增加其高度。更改主體高度後保持滾動位置

我的問題出現在用戶向下滾動頁面然後觸發編輯模式 - 由於頁面高度現在增加，它們當前的滾動位置丟失。我一直在努力尋找一種方法，通過它我可以計算新的scrollTop應該是什麼，但一直沒有成功。

我有一個jsFiddle作爲我的問題的一個例子。它會自動滾動到第三個「入口」，以模擬已經向下滾動的用戶。點擊右上角的「觸發更改」按鈕可以在頁面中添加更多元素，頁面頂部第三個條目的滾動位置將丟失。

我知道我可以在添加新內容後重做$('body').scrollTop($('.entry:nth-child(3)').offset().top);，但我希望無論用戶在頁面上滾動到何處都可以記住滾動位置。

任何幫助，不勝感激！

2013-06-28 alexpls

我加入這個

var tempScrollTop = $(window).scrollTop(); 
//your append logic 
$(window).scrollTop(tempScrollTop+9);

你會注意到，我加入 '9' 的滾動位置。它在給定的小提琴中適合您的要求。但是當你在你的實際網站上實現這個時，你將不得不動態計算新添加的div的高度，並添加該高度而不是「9」。

2013-06-28 04:51:42 aBhijit

感謝您的回答 - 這確實是我追求的行爲。然而，我堅持的是搞清楚如何動態計算變量'9'。 – alexpls

試試這個邏輯。當你添加div時，使用jquery height（）方法來獲取變量中附加div的高度。添加這個變量而不是9。 – aBhijit

回答