如何记住页面的滚动位置

Question

我正在向我的数据库提交一些数据，然后重新加载与用户刚才所在的页面相同的页面，我想知道是否有一种方法可以记住用户刚才所在的滚动位置？

- HurkNburkS

Answer 1

我意识到提交的重要部分被错过了，所以我决定调整代码，在点击事件中存储cookie，而不是原来在滚动时存储。

---

以下是使用jQuery的方法：

jsfiddle _{（如果你想在框架之外查看它，请在网址末尾添加/show）}

非常重要的是，你需要 jquery cookie 插件。

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的回答提醒了我一些重要的事情。

我只是为了检查并垂直滚动到特定位置而做出来的。

- Joonas

---

太棒了！完美解决了问题，我把你提供的内容加入我的代码中，立刻就运行成功了 :) 非常感谢！ - HurkNburkS

可能是因为我使用的是jQuery v1.5.1版本(?), 我不得不使用这个变量才能让它工作：$(window).scroll(function() { //设置cookie }); - fiat

@fiat 是的。.on() 方法是在 jQuery 1.7 中添加的。 - Joonas

Answer 2

(1) 解决方案 1:

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

其次，将此滚动位置值包含在提交到PHP页面的数据中。

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

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

第四步，使用JS将页面滚动到JS变量“Scroll_Pos”指定的位置。

(2) 解决方案2：

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

- jondinham

---

好的，谢谢。我需要做很多研究，这比我预期的要复杂得多。 - HurkNburkS

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"].")";
   ?>
});

- Rosmarine Popcorn

Answer 4

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

- Lane Sharmane

---

虽然这段代码可能回答了问题，但提供有关它如何以及/或为什么解决问题的附加上下文将改善答案的长期价值。您可以在帮助中心找到有关编写良好答案的更多信息：https://stackoverflow.com/help/how-to-answer。祝你好运！ - nima

Answer 5

如果你在代码中使用_targets，你可以节省这个。

或者，你可以发起一个ajax请求来获取窗口高度。

 document.body.offsetHeight;

然后将它们放回去，将变量交给JavaScript并为它们移动页面。

- Case

Answer 6

记住滚动所有页面，请使用以下代码：

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

- SHUBHAM SINGH

Answer 7

我在使用cookie javascript库时遇到了很大的问题，大多数cookie库在onload事件中需要滚动之前无法快速加载。因此，我选择了现代的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>

- hamish

Answer 8

我通过使用 window.pageYOffset 来解决这个问题。我使用事件监听器保存值，或者您可以直接调用 window.pageYOffset。在我的情况下，我需要监听器，所以代码如下：

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

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

- Shubham Verma