如何记住分页刷新滚动位置
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何记住分页刷新滚动位置相关的知识，希望对你有一定的参考价值。
滚动到分页中的另一页时，滚动会上升。当我移至另一页时如何记住当前的滚动位置，并将其返回到我移至我记得的位置？
在此表中的代码
在此表中查看代码
if($result = mysqli_query($link, $sql)){
if(mysqli_num_rows($result) > 0){
echo "<table id='datatable1' class = table style = 'width: 100%; font-size:12.5px; font-family:nanum; background-color:transparent;'>";
echo "<thead >";
echo "<tr>";
echo "<th>No</th>";
echo "<th>amount</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . number_format($row['amount']) . "</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
// Free result set
mysqli_free_result($result);
}
else{
}
}
else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
// Close connection
mysqli_close($link);
在此分页代码中
$result_db = mysqli_query($link,"SELECT COUNT(id) FROM test");
$row_db = mysqli_fetch_row($result_db);
$total_records = $row_db[0];
$total_pages = ceil($total_records / $limit);
$pagLink = "<nav><ul class='pagination'>";
for ($i=1; $i<=$total_pages; $i++) {
$pagLink .= "<li><a href='test.php?page=".$i."'>".$i."</a></li>";
};
echo $pagLink . "</ul></nav>";
在此分页javascript中
$('.pagination').pagination({
items: <?php echo $total_records;?>,
itemsOnPage: <?php echo $limit;?>,
// cssStyle: 'light-theme',
currentPage : <?php echo $page;?>,
hrefTextPrefix : 'test.php?page='
});
我添加的内容记得分页刷新滚动位置
答案
我个人使用此scrollfix JS：
// call loadP and unloadP when body loads/unloads and scroll position will not move
function getScrollXY() {
var x = 0, y = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
// Netscape
x = window.pageXOffset;
y = window.pageYOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
// DOM
x = document.body.scrollLeft;
y = document.body.scrollTop;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
// IE6 standards compliant mode
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
}
return [x, y];
}
function setScrollXY(x, y) {
window.scrollTo(x, y);
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function loadP(pageref){
x=readCookie(pageref+'x');
y=readCookie(pageref+'y');
setScrollXY(x,y)
}
function unloadP(pageref){
s=getScrollXY()
createCookie(pageref+'x',s[0],0.1);
createCookie(pageref+'y',s[1],0.1);
}
您可以使用<body>和onload在onunload标签中添加功能，例如：
<body onunload="unloadP('UniquePageNameHereScroll')" onload="loadP('UniquePageNameHereScroll')">
以上是关于如何记住分页刷新滚动位置的主要内容，如果未能解决你的问题，请参考以下文章