[英]How to remember scroll position and scroll back
我正在使用 html2canvas 庫,當我調用 html2canvas.Parse() 時,頁面滾動到頂部。
我想如果我能在調用 html2canvas.Parse() 之前記住 position,那么我可以 go 回到原始滾動 position。
我選擇了現代 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>
我在下面的例子中使用 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">
要記住滾動使用此代碼
$(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);
});
這對我有用:
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 是否相同,以便僅保存同一頁面的滾動位置,而不保存其他頁面。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.