如何记住页面的滚动位置

Question

我正在向我的数据库提交一些数据，然后重新加载用户刚刚打开的同一页面，我想知道是否有办法记住用户刚刚打开的滚动位置？

Answer 1

我意识到我错过了提交的重要部分，因此，我决定调整代码以在点击事件上存储 cookie，而不是在滚动时存储它的原始方式。

---

这是一个 jquery 的方法：

jsfiddle _{(如果你想在框架外查看，只需在网址末尾添加/show)}

非常重要的是，您需要jquery cookie plugin。

jQuery:

// When document is ready...
$(document).ready(function() {

    // If cookie is set, scroll to the position saved in the cookie.
    if ( $.cookie("scroll") !== null ) {
        $(document).scrollTop( $.cookie("scroll") );
    }

    // When a button is clicked...
    $('#submit').on("click", function() {

        // Set a cookie that holds the scroll position.
        $.cookie("scroll", $(document).scrollTop() );

    });

});

---

---

这里仍然是原始答案中的代码：

jsfiddle

jQuery:

// When document is ready...
$(document).ready(function() {

    // If cookie is set, scroll to the position saved in the cookie.
    if ( $.cookie("scroll") !== null ) {
        $(document).scrollTop( $.cookie("scroll") );
    }

    // When scrolling happens....
    $(window).on("scroll", function() {

        // Set a cookie that holds the scroll position.
        $.cookie("scroll", $(document).scrollTop() );

    });

});

---

@Cody 的回答让我想起了一些重要的事情。

我只是检查并滚动到垂直的位置。

Answer 2

(1) 解决方案一：

首先，通过JavaScript获取点击提交按钮时的滚动位置。

其次，在提交给 PHP 页面的数据中包含这个滚动位置值。

第三，PHP 代码应该将此值作为 JS 变量写回到生成的 HTML 中：

<script>
var Scroll_Pos = <?php echo $Scroll_Pos; ?>;
</script>

四、使用JS滚动到JS变量'Scroll_Pos'指定的位置

(2) 方案二：

将位置保存在cookie中，然后在页面重新加载时使用JS滚动到保存的位置。

Answer 3

将位置存储在隐藏字段中。

<form id="myform">
  <!--Bunch of inputs-->
</form>

比使用 jQuery 存储 scrollTop 和 scrollLeft

$("form#myform").submit(function(){
   $(this).append("<input type='hidden' name='scrollTop' value='"+$(document).scrollTop()+"'>");

   $(this).append("<input type='hidden' name='scrollLeft' value='"+$(document).scrollLeft()+"'>");
});

在下次重新加载时进行重定向或使用 PHP 打印它们

$(document).ready(function(){
   <?php
      if(isset($_REQUEST["scrollTop"]) && isset($_REQUEST["scrollLeft"]))
         echo "window.scrollTo(".$_REQUEST["scrollLeft"].",".$_REQUEST["scrollTop"].")";
   ?>
});

Answer 4

好吧，如果您在代码中使用 _targets，您可以保存它。

或者，您可以执行 ajax 请求来获取 window.height。

 document.body.offsetHeight;

然后将它们放回去，将变量提供给 javascript 并为它们移动页面。

Answer 5

记住滚动所有页面使用此代码

$(document).ready(function (e) {
    let UrlsObj = localStorage.getItem('rememberScroll');
    let ParseUrlsObj = JSON.parse(UrlsObj);
    let windowUrl = window.location.href;

    if (ParseUrlsObj == null) {
        return false;
    }

    ParseUrlsObj.forEach(function (el) {
        if (el.url === windowUrl) {
            let getPos = el.scroll;
            $(window).scrollTop(getPos);
        }
    });

});

function RememberScrollPage(scrollPos) {

    let UrlsObj = localStorage.getItem('rememberScroll');
    let urlsArr = JSON.parse(UrlsObj);

    if (urlsArr == null) {
        urlsArr = [];
    }

    if (urlsArr.length == 0) {
        urlsArr = [];
    }

    let urlWindow = window.location.href;
    let urlScroll = scrollPos;
    let urlObj = {url: urlWindow, scroll: scrollPos};
    let matchedUrl = false;
    let matchedIndex = 0;

    if (urlsArr.length != 0) {
        urlsArr.forEach(function (el, index) {

            if (el.url === urlWindow) {
                matchedUrl = true;
                matchedIndex = index;
            }

        });

        if (matchedUrl === true) {
            urlsArr[matchedIndex].scroll = urlScroll;
        } else {
            urlsArr.push(urlObj);
        }


    } else {
        urlsArr.push(urlObj);
    }

    localStorage.setItem('rememberScroll', JSON.stringify(urlsArr));

}

$(window).scroll(function (event) {
    let topScroll = $(window).scrollTop();
    console.log('Scrolling', topScroll);
    RememberScrollPage(topScroll);
});

Answer 6

我在使用 cookie javascript 库时遇到了重大问题，在我需要滚动 onload 事件之前，大多数 cookie 库加载速度不够快。所以我选择了现代 html5 浏览器来处理这个问题。它将最后滚动位置存储在客户端 Web 浏览器本身中，然后在重新加载页面时从浏览器读取设置回最后滚动位置。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {

    if (localStorage.getItem("my_app_name_here-quote-scroll") != null) {
        $(window).scrollTop(localStorage.getItem("my_app_name_here-quote-scroll"));
    }

    $(window).on("scroll", function() {
        localStorage.setItem("my_app_name_here-quote-scroll", $(window).scrollTop());
    });

  });
</script>

Answer 7

我通过使用window.pageYOffset 来解决这个问题。我使用事件监听器保存了值，或者您可以直接调用window.pageYOffset。就我而言，我需要监听器，所以它是这样的：

window.addEventListener('scroll', function() {
  document.getElementById('showScroll').innerHTML = window.pageYOffset + 'px';
})

我将最新的滚动位置保存在本地存储中。因此，当下次用户来时，我只需检查是否有任何滚动值可通过 localstorage 获得，如果是，则通过 window.scrollTo(0,myScrollPos)

滚动

Answer 8

sessionStorage.setItem("VScroll", $(document).scrollTop());
var scroll_y = sessionStorage.getItem("VScroll");
setTimeout(function() { 
   $(document).scrollTop(scroll_y);
   }, 300);