JQuery：返回上一頁時如何返回完全相同的滾動位置

Question

我有一長串項目，當我點擊每個項目並返回主列表時，滾動位置丟失了。

如何使用 jQuery 返回到相同的確切滾動位置？ 有什么簡單的方法可以做到嗎？

$(document).ready(function() {

  $('.update-button').click(function (){
    sessionStorage.scrollPos = $(window).scrollTop();
    console.log(sessionStorage.scrollPos);
  });
});

var init = function () {
    //get scroll position in session storage
    $(window).scrollTop(sessionStorage.scrollPos || 0)
};
window.onload = init;

以上是我的代碼的樣子。 我試圖記錄位置並且 sessionStorage.scrollPos 是 0。我很確定我將頁面滾動到某個地方。

非常感謝幫助。

Answer 1

您需要在 sessionStorage（或任何存儲）中存儲滾動位置的值，並在頁面加載時再次使用它。

$(window).scroll(function () {
    //set scroll position in session storage
    sessionStorage.scrollPos = $(window).scrollTop();
});
var init = function () {
    //get scroll position in session storage
    $(window).scrollTop(sessionStorage.scrollPos || 0)
};
window.onload = init;

Answer 2

如果它對某人不起作用，只需修改@Rayon Answer。

$("body").on("scroll", function () {
    //set scroll position in session storage
    sessionStorage.scrollPos = $(window).scrollTop();
});
var init = function () {
    //get scroll position in session storage
    $("body").scrollTop(sessionStorage.scrollPos || 0)
};
window.onload = init;

您可以將$("body")替換為 HTML 中最頂部的元素。 我正在使用 framework7 移動應用程序，我需要使用$(".page-content") 。 它對我有用。

Answer 3

沒有簡單的解決方案，但在發生重定向的點擊事件中，使用獲取當前滾動位置

var scroll = $(window).scrollTop();

然后將滾動變量的值存儲到 localstorage 中（如果 localstorage 不可用，則為 cookie）。

然后在頁面加載時從本地存儲中查找滾動位置（如果可用），如果是，則移動到該位置。

Answer 4

這項工作適用於閱讀更多文章或隱藏文章，以獲取點擊閱讀更多內容的當前位置高度。

#note：您需要切換按鈕閱讀更多並隱藏

let readhide = document.querySelectorAll('.read-hide');
let readmore = document.querySelectorAll('.read-more');
readmore.forEach((more,key) => {
    let height, moreHeight;
    window.addEventListener('scroll', function(event){
        height = Math.floor(event.target.scrollingElement.scrollTop);
    });
    
    more.addEventListener('click', function(){
        moreHeight = height;
    });
    
    readhide[key].addEventListener('click', function(){
        window.scrollTo(0, moreHeight);
    });
});

Answer 5

    <a href="javascript:window.history.back()">Return Text </a>

Answer 6

嘗試這個。

<button onclick="goBack()">Go Back</button>


function goBack() {
  window.history.go(-1);
}