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);
}