我喜欢这个问题,所以我自己看了看。我认为最好的方法是使用localstorage和jQuery来存储用户的当前URL和滚动位置。然后,您可以在他们返回该页面时运行检查,或者使用类似“继续阅读”的按钮,该按钮将检索URL和滚动位置,并将用户发送到该确切点。
JS公司
if(typeof(Storage) !== "undefined") {
检查是否支持本地存储
var storedResult = localStorage.getItem("location");
var storedURL = localStorage.getItem("url");
获取存储的URL和滚动位置
if (storedURL !== \'undefined\' && storedResult !== null) {
检查URL是否存储在var currentUrl=窗口中。地方href;获取当前URL
if (currentUrl != storedURL) {
检查当前URL和存储的URL是否不匹配。
将用户发送到存储的URL。您可能希望通过“继续阅读”按钮或其他方式触发此操作,否则您可能会将用户发送到他们不想去的地方。
}
else if (storedResult !== \'undefined\' && storedResult !== null) {
elseif检查是否存储了窗口滚动位置。
$(window).scrollTop(storedResult);
滚动到该位置。
}
}
$(window).scroll(function () {
滚动事件
var scrolledDown = window.scrollY;
var currentUrl = window.location.href;
获取窗口滚动药水和url
localStorage.setItem("location", scrolledDown);
localStorage.setItem("url", currentUrl);
存储在本地存储中。
});
} else {
//No Web Storage Support.
}
全部加在一起
if(typeof(Storage) !== "undefined") {
//Check is local storage is supported
var storedResult = localStorage.getItem("location");
var storedURL = localStorage.getItem("url");
//Get the Stored URL and Scroll Location
if (storedURL !== \'undefined\' && storedResult !== null) {
//Check if the URL is stored
var currentUrl = window.location.href;
//Get the current URL
if (currentUrl != storedURL) {
//Check if the current URL and Stored URL Do Not match.
// send user to stored URL. You would probably want to trigger this on a "continue reading" button or something otherwise you could end up sending users where they dont wish to go.
}
else if (storedResult !== \'undefined\' && storedResult !== null) {
//elseif check if the window scroll location is stored.
$(window).scrollTop(storedResult);
//scroll to that location.
}
}
$(window).scroll(function () {
//On scroll event
var scrolledDown = window.scrollY;
var currentUrl = window.location.href;
// get the window scroll potion and url
localStorage.setItem("location", scrolledDown);
localStorage.setItem("url", currentUrl);
// store in local storage.
});
} else {
// No Web Storage Support.
}
演示:
https://jsfiddle.net/fg9uok4L/性能不确定,未测试。