在同一页面中执行php获取请求时保存滚动位置



我有公司员工的名单。当我点击一个工人时,在页面的一角显示了mysql数据库中的工人图像。和mysqlSELECT参数,我从url:得到

示例:

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

单击时如何保存当前滚动位置。

您可以进行

var scroll_position = window.scrollY;

并滚动到那里:

window.scrollTo(0, scroll_position);

你可以在一个新的HTML文件中用这个代码来测试这些:

<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>
<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>

最新更新