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
Why React Props Are Passed Undefined to the Child Component
How to Delete Rows of Data Using Sequelize
How to Output a Pdf Buffer to Browser Using Nodejs
Hide Menu Sidebar When Clicking Outside the Bar or the Button
Read Lines of a Txt File and Organize in a Json File
Using Html5/Javascript to Generate and Save a File
Concatenate Json to a String in JavaScript
Image Taken from Camera Not Saved to Gallery
Check If Json Response Data Is Empty
How to Get Full Path of Selected File on Change of <Input Type='File'> Using Javascript, Jquery-Ajax
Regex to Find Json Values Without Quotes
Detect If a Field Is Updated With JavaScript or Jquery
How to Remove Special Character from Json Without Parsing
Javascript Check If Values Exist in Array Json
Filter/Search from the Drop-Down List of Options Using Angular
Convert Image from Url to Base64
Javascript Adding Variable to Href
Disable/Hide Download Button in Iframe on Default Pdf Viewer