顯示彈出窗口後處於相同的滾動位置

Question

我有一個有很多內容的經典頁面和一個打開彈出窗口的按鈕。 這個彈出窗口的高度可能比我的窗口大，所以我需要在彈出窗口中滾動。 當我隱藏我的觸發器時，我想要顯示與此前彈出相同的滾動位置。 我嘗試了很多的解決方案，並且......這不完全是:) 你可以看到的jsfiddle一個例子：http://jsfiddle.net/S6EFW/

你可以看到什麼，我想美國在網站上今天做：http://www.usatoday.com/

如果您滾動一下，然後單擊其中一篇主文章，會顯示一個彈出窗口。您可以在此彈出框中滾動。關閉彈出窗口時，您位於頁面的相同位置，而不是打開彈出窗口。

我的代碼：

$("#launch").click(function() { 
    $("#popup").fadeToggle("slow", function() { 

    }); 
    $("#content").toggleClass("whenloaded"); 

    }); 

以一級添加的內容時顯示彈出：

.whenloaded { 
    position : fixed; 
} 

如果你有一個想法的方式來實現這一目標！非常感謝社區:)

Answer 1

我已經想通了你的意思。如果你想有一個靜態頁面（沒有輸入和東西），更簡單的方法是使用普通的javascript。使用innerHtml和css，您可以將所有內容放入div中，並根據彈出窗口是否打開給出2個不同的ID，並且1 id有css不顯示任何內容。對於打開彈出窗口的狀態，請使用z-index和y-overflow。

我會稍後編輯它，併發佈一個例子，如果我有機會。

Answer 2

如果我是正確的，this will be close to what you are after

編輯：Updated Fiddle

相關的CSS：

html,body{ 
    margin:0; padding:0; height:100%; width:100%; position:absolute; top:0; left:0; overflow:hidden; 
} 
#content{ 
    overflow-y:scroll; 
    height:100%; 
    width:100%; 
    position:absolute; 
    top:0; 
    left:0; 
} 
#launch{ 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:999; 
    background:white; 
    padding:4px; 
    border:1px solid grey; 
} 
#overlay{ 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:0; 
    left:0; 
    display:none; 
    z-index:99; 
    text-align:center; 
} 
#mask{ 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:0; 
    left:0; 
    background:blue; 
    opacity:0.5; 
} 
#popup{ 
    z-index:100; 
    position:relative; 
    width:60%; 
    top:20%; 
    margin:auto; 
    max-height:100px; 
    background:white; 
    overflow-y:scroll; 
}