如何记住分页刷新滚动位置答案

【问题标题】：How to remember pagination refresh scroll position如何记住分页刷新滚动位置
【发布时间】：2020-09-24 03:30:06
【问题描述】：

当您转到分页中的另一个页面时，滚动会上升。当我移动到另一页时，如何记住当前滚动位置并将其返回到我移动时记得的位置？

本表代码

在此表查看代码

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='
      });

我所做的添加记住分页刷新滚动位置

【问题讨论】：

标签： javascript php jquery scroll pagination

【解决方案1】：

我个人使用这个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);
}

您可以使用onload 和onunload 在<body> 标签中添加功能，例如：

<body onunload="unloadP('UniquePageNameHereScroll')" onload="loadP('UniquePageNameHereScroll')">

【讨论】：

谢谢。但这不是我想要的。