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"> |