关于 javascript:如何记住滚动位置和向后滚动

How to remember scroll position and scroll back

我正在使用 html2canvas 库,当我调用 html2canvas.Parse() 时,页面滚动到顶部。

我想如果我能在调用 html2canvas.Parse() 之前记住位置,那么我可以回到原来的滚动位置。

  • 获取浏览器滚动的当前位置(特别是垂直)?
  • 滚动回我之前存储的位置?

  • 我选择了现代 html5 浏览器来处理这个问题。它将最后一个滚动位置存储在客户端 Web 浏览器本身中,然后在重新加载页面时将设置从浏览器读取回最后一个滚动位置。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

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

      });


    这对我有用:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    window.onbeforeunload = function () {
            var scrollPos;
            if (typeof window.pageYOffset != 'undefined') {
                scrollPos = window.pageYOffset;
            }
            else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
                scrollPos = document.documentElement.scrollTop;
            }
            else if (typeof document.body != 'undefined') {
                scrollPos = document.body.scrollTop;
            }
            document.cookie ="scrollTop=" + scrollPos +"URL=" + window.location.href;
        }

    window.onload = function () {
        if (document.cookie.includes(window.location.href)) {
            if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
                var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/);
                document.documentElement.scrollTop = parseInt(arr[1]);
                document.body.scrollTop = parseInt(arr[1]);
            }
        }
    }

    我在别处找到的大部分代码,不幸的是我再也找不到源代码了。刚刚添加了一个检查以查看 URL 是否相同,以便仅保存同一页面的滚动位置,而不保存其他页面。


    要记住滚动使用此代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    $(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);
    });


  • 将滚动位置保存到变量
  • 做一点事
  • 向后滚动
  • 我在下面的例子中使用 jQuery 来简化事情,但你可以很容易地在 vanilla js 中做同样的事情。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    var scrollPos;

    $('.button').on('click', function() {
     
      // save scroll position to a variable
      scrollPos = $(window).scrollTop();
     
      // do something
      $('html, body').animate({
        scrollTop: $("#cats").offset().top
      }, 500);
     
      // scroll back
      setTimeout(
        function() {
          $('html, body').animate({
            scrollTop: scrollPos
          }, 500);
        }, 1000);
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .button {
      position: fixed;
      font-size: 12px;
      margin: 10px;
    }

    #rainbow {
      height: 2000px;
      background: -webkit-linear-gradient(red, orange, yellow, green, cyan, blue, violet);
      background: -o-linear-gradient(red, orange, yellow, green, cyan, blue, violet);
      background: -moz-linear-gradient(red, orange, yellow, green, cyan, blue, violet);
      background: linear-gradient(red, orange, yellow, green, cyan, blue, violet);
    }

    #cats {
      width: 100%;
    }
    1
    2
    3
    4
    5
    6
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
    <input class="button" value="Scroll down a bit then click here for 1 second of cats!" type="button">

    <img id="cats" title="By Alvesgaspar [CC BY-SA 3.0
     (https://creativecommons.org/licenses/by-sa/3.0
    )], via Wikimedia Commons"
    width="1024" alt="Cat poster 1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Cat_poster_1.jpg/1024px-Cat_poster_1.jpg">