admin管理员组文章数量:1134247
Can someone show me what I'm doing wrong? I need my page to refresh after a certain period of time, but it refreshes to the top of the page, I need it to not change the page location! So this is what I have now, which is not working. Is it the meta tags? Here is what I have which still doesn't refresh. Must be doing something wrong?
Here is what I originally had...
<!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>
After reading some of the initial answers I've changed it to this...
<!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>
Can someone show me what I'm doing wrong? I need my page to refresh after a certain period of time, but it refreshes to the top of the page, I need it to not change the page location! So this is what I have now, which is not working. Is it the meta tags? Here is what I have which still doesn't refresh. Must be doing something wrong?
Here is what I originally had...
<!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>
After reading some of the initial answers I've changed it to this...
<!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>
10 Answers
Reset to default 85this will do the magic
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var scrollpos = localStorage.getItem('scrollpos');
if (scrollpos) window.scrollTo(0, scrollpos);
});
window.onbeforeunload = function(e) {
localStorage.setItem('scrollpos', window.scrollY);
};
</script>
document.location.reload() stores the position, see in the docs.
Add additional true parameter to force reload, but without restoring the position.
document.location.reload(true)
MDN docs:
The forcedReload flag changes how some browsers handle the user's scroll position. Usually reload() restores the scroll position afterward, but forced mode can scroll back to the top of the page, as if window.scrollY === 0.
I modified Sanoj Dushmantha's answer to use sessionStorage instead of localStorage. However, despite the documentation, browsers will still store this data even after the browser is closed. To fix this issue, I am removing the scroll position after it is reset.
<script>
document.addEventListener("DOMContentLoaded", function (event) {
var scrollpos = sessionStorage.getItem('scrollpos');
if (scrollpos) {
window.scrollTo(0, scrollpos);
sessionStorage.removeItem('scrollpos');
}
});
window.addEventListener("beforeunload", function (e) {
sessionStorage.setItem('scrollpos', window.scrollY);
});
</script>
If you don't want to use local storage then you could attach the y position of the page to the url and grab it with js on load and set the page offset to the get param you passed in, i.e.:
//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 );
}
});
UPDATE
You can use document.location.reload(true) as mentioned below instead of the forced trick below.
Replace your HTML with this:
<!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>
This might be useful for refreshing also. But if you want to keep track of position on the page before you click on a same position.. The following code will help.
Also added a data-confirm for prompting the user if they really want to do that..
Note: I'm using jQuery and js-cookie.js to store cookie info.
$(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 example of using it like this.
<a href='gotopage.html' class='saveScrollPostion' data-confirm='Are you sure?'>Goto what the heck</a>
Thanks Sanoj, that worked for me.
However iOS does not support "onbeforeunload" on iPhone. Workaround for me was to set localStorage with js:
<button onclick="myFunction()">Click me</button>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var scrollpos = localStorage.getItem('scrollpos');
if (scrollpos) window.scrollTo(0, scrollpos);
});
function myFunction() {
localStorage.setItem('scrollpos', window.scrollY);
location.reload();
}
</script>
I found a really simple solution to this. Just add an ID link as a separate parameter in the links HREF tag
<a class="page-link" href="{{ url_for('events.home', page=page_num) }}, #past_events">
that links to the top of the div that I want to stay in focus.
If you need to navigate to a page with a certain scroll position instead of reloading it, mark an element with an id:
<h1 id="success">Kontakt</h1>
and redirect to the url from js:
window.location.href = '/contact#success'
or from html (@Chris' answer):
<a href="/contact#success"></a>
This was the easiest code I've ever had to write.
NEVER use Page.MaintainScrollPositionOnPostBack = True, it is completely useless
This is all the script you need to maintain position. Add this to any page or to the master if you are using master pages.
<script type="text/javascript">
function setScreen() {
var yScreen = localStorage.getItem("yPos");
window.scrollTo(0, yScreen);
}
function setScroll() {
var yScroll = window.pageYOffset;
localStorage.setItem("yPos", yScroll);
}
function clearScreen() {
localStorage.setItem("yPos", 0);
window.scrollTo(0, 0);
}
</script>
Add onscroll="setScroll()" onload="setScreen()" to the body tag
<body onscroll="setScroll()" onload="setScreen()">
To reset scroll when a user returns to your site the local storage needs to be reset
Add this to the Default.aspx page and then redirect user to any page you want.
<script type="text/javascript">
function resetScroll() {
localStorage.setItem("yPos", 0);
location.replace("somepage.aspx")
}
}
</script>
Add onload="resetScroll()" to the body tag of that page.
<body onload="resetScroll()">
This took me about 2 hours to write, debug and publish.
本文标签： javascriptRefresh Page and Keep Scroll PositionStack Overflow
版权声明：本文标题：javascript - Refresh Page and Keep Scroll Position - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736817758a1954160.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
/cards/:idroute as a full screen modal and keep the/cardsroute mounted behind it. Answer link here. – Gabriel Arghire Commented Mar 3, 2022 at 17:48