如何將瀏覽器位置應用於我的代碼？

Question

今天早些時候，我問了一個關於我的網頁非常“跳躍”的問題。

我在這里發布了我的網頁的測試版本： http : //armandbakx.nl/

可以在此處查看代碼筆： http ://codepen.io/anon/pen/GpmQoY

$('img').on('click', show);
$('.overlay').on('click', hide);

function show(){   
   $('.scroll-container').eq($(this).parent().index()).addClass('show');
   $('.content-container').addClass('no-scroll');
   $('.overlay').addClass('opacity');
}

function hide() {
   $('.scroll-container').removeClass('show');
   $('.content-container').removeClass('no-scroll');
   $('.overlay').removeClass('opacity');
}

該頁面的想法是您單擊一個圖像（在本例中為紅色方塊），會顯示一個隱藏的容器，可以滾動瀏覽該容器，其中包含有關該圖像的更多信息和圖像。

但是，當您單擊其中一個方塊並顯示容器和疊加層時，其他圖像（方塊）會移動。 有人向我建議，在我的 show 函數中，我應該嘗試跟蹤打開此容器時瀏覽器所在的位置。 然后在我的隱藏功能中，將瀏覽器返回到該位置。

說實話，我根本不擅長 JavaScript，所以我對如何應用它幾乎一無所知。 我在這個網頁上遇到了更多問題，我必須快速修復它們，因此我再次詢問。 有人可以幫我解決這個問題嗎？

Answer 1

據我所知，由於 .no-scroll 類，您的方塊正在四處移動。 如果我刪除它，一切似乎都能正常工作。

嘗試這個：

$('img').on('click', show);
$('.overlay').on('click', hide);

function show(){   
   $('.scroll-container').eq($(this).parent().index()).addClass('show');
   $('.overlay').addClass('opacity');
}

function hide() {
   $('.scroll-container').removeClass('show');
   $('.overlay').removeClass('opacity');
}

Answer 2

在您的顯示功能中，您可以在顯示文本之前檢索滾動位置。

scrollHeight = $(document).scrollTop();

在您的隱藏功能中，將滾動位置設置為您之前獲得的值。

$(document).scrollTop( scrollHeight );