如何记住滚动位置并向后滚动

Question

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

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

1. 获取浏览器滚动的当前位置（特别是垂直位置）？
2. 滚动回我之前存储的位置？

Answer 1

我采用了现代 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 2

这对我有用：

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 是否相同，以便仅保存同一页面的滚动位置，而不保存其他页面的滚动位置。

Answer 3

1. 将滚动位置保存到变量
2. 做某事
3. 向后滚动

我在下面的示例中使用 jQuery 来使事情变得简单，但你可以轻松地在 vanilla js 中做同样的事情。

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

.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%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<input class="button" value="Scroll down a bit then click here for 1 second of cats!" type="button">
<div id="rainbow"></div>
<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">

Answer 4

要记住滚动使用此代码

$(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 5

另一种无需任何库且滚动流畅的方式。

const path = window.location.pathname;
const list = path.split('/');
const cookieName = list.filter(n => n).pop();

window.addEventListener('load', function () {
  let position = getCookie(cookieName);

  if (position !== undefined) {
    setTimeout(function () {
      console.log(`restore scroll position - ${position}`);
      window.scrollTo({
        top: position,
        left: 0,
        behavior: 'smooth',
      });
    }, 1);
  }
});

let timerId;

window.addEventListener('scroll', function () {
  if (timerId) {
    clearTimeout(timerId);
  }

  timerId = setTimeout(function () {
    position = window.pageYOffset;
    console.log(`set scroll cookie - ${position}`);
    setCookie(cookieName, position, {secure: true, 'max-age': 'session'});
  }, 300);
});

注意：

getCookie

和

setCookie

可以在这里找到https://javascript.info/cookie