Refresh Page and Keep Scroll Position

Refresh Page and Keep Scroll Position

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>

Keep scroll position and save toggle after page refresh

I'd advise using sessionStorage for this.

First, remove all onclick=refreshPage() from your HTML. You want to keep all JS code inside your JS, and to set all handlers at one place. As a best practice, do not use onclick at all.

Next, create two functions: loadState() and saveState(). You will need to call call loadState() on every page load (refresh), and saveState() everytime a toggle button is clicked.

In your handler for clicks on button, also perform the page refresh.

The entire JS code:

$(window).on('load', function() {
loadState();
});

$('.read-more-toggle').on('click', function() {
$(this).next('.read-more-content').toggleClass('hide');

saveState();
refreshPage();
});

// Fold or unfold each content based on state before refresh
// And go to same scroll position before refresh
function loadState() {
let hidden_states = sessionStorage.getItem('hidden-states');
if (!hidden_states) {
return;
}
hidden_states = hidden_states.split(',');
$('.read-more-content').each(function(i, elem) {
if (hidden_states[i] === 'hide') {
elem.classList.add('hide');
}
else {
elem.classList.remove('hide');
}
});

document.scrollingElement.scrollLeft = sessionStorage.getItem('scroll-x');
document.scrollingElement.scrollTop = sessionStorage.getItem('scroll-y');
}

// Remember fold & unfold states, and scroll positions
function saveState() {
let hidden_states = [];
$('.read-more-content').each(function(i, elem) {
hidden_states.push(elem.classList.contains('hide') ? 'hide' : 'show');
});

sessionStorage.setItem('hidden-states', hidden_states);
sessionStorage.setItem('scroll-x', document.scrollingElement.scrollLeft);
sessionStorage.setItem('scroll-y', document.scrollingElement.scrollTop);
}

function refreshPage() {
window.location.reload();
}

Note: If at all possible, try to avoid a page refresh. Storing view states then recreating them after a refresh feels sub-optimal. In some browsers, it may also result in occasional scroll jump glitches as it repaints the restored states.

Lastly, consider if you really need jQuery for your project. Most functionality can be implemented in vanilla JS.

Retain scrollbar position even after reloading using javascript

You can use session storage to store the position then get back to the position when the page is reloaded, like this:

$(window).scroll(function() {
sessionStorage.scrollTop = $(this).scrollTop();
});

$(document).ready(function() {
if (sessionStorage.scrollTop != "undefined") {
$(window).scrollTop(sessionStorage.scrollTop);
}
});

Here is the JSFiddle demo



Related Topics



Leave a reply



Submit