刷新页面并保持滚动位置
有人能告诉我我做错了什么吗？ 我需要我的页面刷新一段时间后，但它刷新页面的顶部，我需要它不改变页面的位置！所以这是我现在不工作的元标记？ 这里是我还没有不刷新一定是做错了什么？
这是我原来的…
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="refresh" content="72"> <meta http-equiv="Pragma" CONTENT="no-cache"> <meta http-equiv="Expires" CONTENT="-1"> <style type="text/css"> body { background-image: url('../Images/Black-BackGround.gif'); background-repeat: repeat; } </style> </head> <script type="text/javascript"> function saveScrollPositions(theForm) { if(theForm) { var scrolly = typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement.scrollTop; var scrollx = typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement.scrollLeft; theForm.scrollx.value = scrollx; theForm.scrolly.value = scrolly; } } </script> <form action="enroll.php" name="enrollment" method="post" onsubmit="return saveScrollPositions (this);"> <input type="hidden" name="scrollx" id="scrollx" value="0" /> <input type="hidden" name="scrolly" id="scrolly" value="0" /> <STYLE type="text/css"> #Nav a{ position:relative; display:block; text-decoration: none; color:Black; } Body td{font-Family: Arial; font-size: 12px; } </style> 在阅读了一些最初的答案之后，我改变了这个…
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> body { background-image: url('../Images/Black-BackGround.gif'); background-repeat: repeat; } </style> </head> <script> function refreshPage () { var page_y = $( document ).scrollTop(); window.location.href = window.location.href + '?page_y=' + page_y; } window.onload = function () { setTimeout(refreshPage, 35000); if ( window.location.href.indexOf('page_y') != -1 ) { var match = window.location.href.split('?')[1].split("&")[0].split("="); $('html, body').scrollTop( match[1] ); } } </script> <STYLE type="text/css"> #Nav a{ position:relative; display:block; text-decoration: none; color:black; } Body td{font-Family: Arial; font-size: 12px; } </style>
将ALL的HTMLreplace为：
<!DOCTYPE html> <html> <head> <style type="text/css"> body { background-image: url('../Images/Black-BackGround.gif'); background-repeat: repeat; } body td { font-Family: Arial; font-size: 12px; } #Nav a { position:relative; display:block; text-decoration: none; color:black; } </style> <script type="text/javascript"> function refreshPage () { var page_y = document.getElementsByTagName("body")[0].scrollTop; window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y; } window.onload = function () { setTimeout(refreshPage, 35000); if ( window.location.href.indexOf('page_y') != -1 ) { var match = window.location.href.split('?')[1].split("&")[0].split("="); document.getElementsByTagName("body")[0].scrollTop = match[1]; } } </script> </head> <body><!-- BODY CONTENT HERE --></body> </html>
document.location.reload()存储的位置，但它没有在文档中提到。
添加额外的true参数来强制重新加载。
document.location.reload(true)
如果你不想使用本地存储，那么你可以将页面的y位置附加到url，并在加载时使用js来抓取它，并将页面偏移量设置为您传入的get参数，即：
//code to refresh the page var page_y = $( document ).scrollTop(); window.location.href = window.location.href + '?page_y=' + page_y; //code to handle setting page offset on load $(function() { if ( window.location.href.indexOf( 'page_y' ) != -1 ) { //gets the number from end of url var match = window.location.href.split('?')[1].match( /\d+$/ ); var page_y = match[0]; //sets the page offset $( 'html, body' ).scrollTop( page_y ); } });
这也可能对刷新有用。 但是，如果你想跟踪页面上的位置，然后单击相同的位置。下面的代码将有所帮助。
还添加了一个数据确认提示用户，如果他们真的想这样做..
注意：我使用jQuery和js-cookie.js来存储cookie信息。
$(document).ready(function() { // make all links with data-confirm prompt the user first. $('[data-confirm]').on("click", function (e) { e.preventDefault(); var msg = $(this).data("confirm"); if(confirm(msg)==true) { var url = this.href; if(url.length>0) window.location = url; return true; } return false; }); // on certain links save the scroll postion. $('.saveScrollPostion').on("click", function (e) { e.preventDefault(); var currentYOffset = window.pageYOffset; // save current page postion. Cookies.set('jumpToScrollPostion', currentYOffset); if(!$(this).attr("data-confirm")) { // if there is no data-confirm on this link then trigger the click. else we have issues. var url = this.href; window.location = url; //$(this).trigger('click'); // continue with click event. } }); // check if we should jump to postion. if(Cookies.get('jumpToScrollPostion') !== "undefined") { var jumpTo = Cookies.get('jumpToScrollPostion'); window.scrollTo(0, jumpTo); Cookies.remove('jumpToScrollPostion'); // and delete cookie so we don't jump again. } });
这样使用它的一个例子。
<a href='gotopage.html' class='saveScrollPostion' data-confirm='Are you sure?'>Goto what the heck</a>
