Save scroll position while doing php get request in same page

Question

I have list of company workers. When I click to a worker, in corner of page showing workers image from mysql database. and mysql SELECT parameters I get from url:

Example:

<a href="<?php echo '?imgid=' . $imgID ?>">John SMITH</a>

How can I save my current scroll position when I'm clicking to .

You need to clarify this step-by-step, when taking what action, the scroll position of what exactly should be remembered? — Markus AO, Jan 26 '22 at 06:50
For your question, you can use local storage also: https://www.w3schools.com/html/html5_webstorage.asp — paradigm111, Jan 26 '22 at 09:47
For your second question, here is a way to do it: https://pastebin.com/raw/BLBSUh7M — paradigm111, Jan 26 '22 at 10:06

paradigm111 · Answer 1 · 2022-01-26T06:54:23.873

1

You can do

var scroll_position = window.scrollY;

and to scroll there:

window.scrollTo(0, scroll_position);

You can test these out with this code in a new HTML file:

<div style="height: 400px;"></div>
<input type="button" value="Submit" id="submit" />
<div style="height: 2000px;"></div>
<script>
document.querySelector("#submit").onclick = function () {
    var scroll_position = window.scrollY;
    alert(scroll_position);
    window.scrollTo(0, 100);
}
</script>

edited Jan 26 '22 at 06:54

answered Jan 26 '22 at 06:49

paradigm111

388
1
2
10

I need to use this in a tag onclick, and then page raloading with get parameters in url, after reloading page is not keeping scroll position. I think that I need to keep scroll_position = window.scrollY; in cookie or in session, can You help me doing that way? – David Tumanyan Jan 26 '22 at 09:42

score 1 · Accepted Answer · answered Jan 26 '22 at 10:12

<body onload="restoreScrollPos()">  

  <a onclick="setScroll()" href="<?php echo '?imgid=' . $imgID ?>">John SMITH</a> 

</body>

<script> 
function setScroll() {
    let scroll = window.scrollY;
    let scrollString = scroll.toString();
    localStorage.setItem("scrollPosition", scrollString);
}


function restoreScrollPos() {
    let posYString = localStorage.getItem("scrollPosition");
    let posY = parseInt(posYString);
    window.scroll(0, posY);
    return true;
}
</script>

Save scroll position while doing php get request in same page

2 Answers2