如何記住分頁刷新滾動position

Question

當您將 go 滾動到分頁中的另一個頁面時，向上滾動 go。 當我移動到另一頁並將其返回到我移動時記得的那個時，我如何才能記住當前的滾動 position？

在此表代碼中

在此表中查看代碼

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

我添加了什么記住分頁刷新滾動 position

Answer 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')">

如何記住分頁刷新滾動position

問題描述

1 個解決方案

解決方案1
0 2020-06-05 01:46:26

如何記住分頁刷新滾動position

問題描述

1 個解決方案

解決方案1 0 2020-06-05 01:46:26

解決方案1
0 2020-06-05 01:46:26