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）解决方案1：

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

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

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

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

第四，使用JS滚动到JS变量'Scroll_Pos'

指定的位置

（2）解决方案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["scrollTop"].",".$_REQUEST["scrollLeft"].")";
   ?>
});

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库时遇到了主要问题，大多数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>

Answer 7

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

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

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

滚动

如何记住页面的滚动位置

7 个答案: