php 如何记住页面的滚动位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12744145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to remember scroll position of page
提问by HurkNburkS
I am submitting some data to my database then reloading the same page as the user was just on, I was wondering if there is a way to remember the scroll position the user was just on?
我正在向我的数据库提交一些数据，然后重新加载用户刚刚所在的页面，我想知道是否有办法记住用户刚刚所在的滚动位置？
回答by Joonas
I realized that I had missed the important part of submitting, so, I decided to tweak the code to store the cookie on click event instead of the original way of storing it while scrolling.
我意识到我错过了提交的重要部分，因此，我决定调整代码以在单击事件时存储 cookie，而不是在滚动时存储它的原始方式。
Here's a jquery way of doing it:
这是一种 jquery 方法：
jsfiddle( Just add /showat the end of the url if you want to view it outside the frames )
jsfiddle （/show如果你想在框架外查看它，只需在 url 的末尾添加）
Very importantly, you'll need the jquery cookie plugin.
非常重要的是，您将需要jquery cookie 插件。
jQuery:
jQuery：
// When document is ready...
$(document).ready(function() {
// If cookie is set, scroll to the position saved in the cookie.
if ( $.cookie("scroll") !== null ) {
$(document).scrollTop( $.cookie("scroll") );
}
// When a button is clicked...
$('#submit').on("click", function() {
// Set a cookie that holds the scroll position.
$.cookie("scroll", $(document).scrollTop() );
});
});
Here's still the code from the original answer:
这里仍然是原始答案中的代码：
jQuery:
jQuery：
// When document is ready...
$(document).ready(function() {
// If cookie is set, scroll to the position saved in the cookie.
if ( $.cookie("scroll") !== null ) {
$(document).scrollTop( $.cookie("scroll") );
}
// When scrolling happens....
$(window).on("scroll", function() {
// Set a cookie that holds the scroll position.
$.cookie("scroll", $(document).scrollTop() );
});
});
@Cody's answer reminded me of something important.
@Cody 的回答让我想起了一些重要的事情。
I only made it to check and scroll to the position vertically.
我只是为了检查并垂直滚动到该位置。
回答by jondinham
(1) Solution 1:
(1) 方案一：
First, get the scroll position by JavaScript when clicking the submit button.
首先，在单击提交按钮时通过 JavaScript 获取滚动位置。
Second, include this scroll position value in the data submitted to PHP page.
其次，在提交给 PHP 页面的数据中包含此滚动位置值。
Third, PHP code should write back this value into generated HTML as a JS variable:
第三，PHP 代码应该将此值作为 JS 变量写回到生成的 HTML 中：
<script>
var Scroll_Pos = <?php echo $Scroll_Pos; ?>;
</script>
Fourth, use JS to scroll to position specified by the JS variable 'Scroll_Pos'
四、使用JS滚动到JS变量'Scroll_Pos'指定的位置
(2) Solution 2:
(2) 方案二：
Save the position in cookie, then use JS to scroll to the saved position when page reloaded.
将位置保存在cookie中，然后在页面重新加载时使用JS滚动到保存的位置。
回答by Burimi
Store the position in an hidden field.
将位置存储在隐藏字段中。
<form id="myform">
<!--Bunch of inputs-->
</form>
than with jQuery store the scrollTop and scrollLeft
比使用 jQuery 存储 scrollTop 和 scrollLeft
$("form#myform").submit(function(){
$(this).append("<input type='hidden' name='scrollTop' value='"+$(document).scrollTop()+"'>");
$(this).append("<input type='hidden' name='scrollLeft' value='"+$(document).scrollLeft()+"'>");
});
Than on next reload do a redirect or print them with PHP
比下一次重新加载做一个重定向或用 PHP 打印它们
$(document).ready(function(){
<?php
if(isset($_REQUEST["scrollTop"]) && isset($_REQUEST["scrollLeft"]))
echo "window.scrollTo(".$_REQUEST["scrollTop"].",".$_REQUEST["scrollLeft"].")";
?>
});
回答by Case
Well, if you use _targets in your code you can save that.
好吧，如果你在你的代码中使用 _targets 你可以保存它。
Or, you can do an ajax request to get the window.height.
或者，您可以执行 ajax 请求来获取 window.height。
document.body.offsetHeight;
Then drop them back, give the variable to javascript and move the page for them.
然后将它们放回原处，将变量赋予 javascript 并为它们移动页面。
回答by SHUBHAM SINGH
To Remember Scroll all pages Use this code
记住滚动所有页面使用此代码
$(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);
});
回答by hamish
I had major problems with cookie javascript libraries, most cookie libraries could not load fast enough before i needed to scroll in the onload event. so I went for the modern html5 browser way of handling this. it stores the last scroll position in the client web browser itself, and then on reload of the page reads the setting from the browser back to the last scroll position.
我在使用 cookie javascript 库时遇到了重大问题，在我需要滚动 onload 事件之前，大多数 cookie 库的加载速度都不够快。所以我选择了现代 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>
