Are there any alternative approaches or technologies that can be used in conjunction with PHP to maintain scroll position after a page refresh?

When a page is refreshed in PHP, the scroll position is typically reset to the top of the page. To maintain the scroll position after a page refresh, you can use JavaScript in conjunction with PHP to store the current scroll position in a session variable before the page is refreshed, and then set the scroll position back to the stored value after the page is reloaded. 

<?php
session_start();

if(isset($_POST['scroll_position'])){
    $_SESSION['scroll_position'] = $_POST['scroll_position'];
}

$scroll_position = isset($_SESSION['scroll_position']) ? $_SESSION['scroll_position'] : 0;
?>

<!DOCTYPE html>
<html>
<head>
    <title>Scroll Position Example</title>
</head>
<body>
    <div style="height: 2000px;">
        <h1>Scroll down and refresh the page</h1>
    </div>

    <form id="scrollForm" method="post">
        <input type="hidden" name="scroll_position" id="scrollPosition" value="<?php echo $scroll_position; ?>">
    </form>

    <script>
        document.addEventListener("DOMContentLoaded", function(){
            document.getElementById('scrollPosition').value = window.scrollY;

            document.getElementById('scrollForm').submit();
        });

        window.onload = function(){
            window.scrollTo(0, <?php echo $scroll_position; ?>);
        };
    </script>
</body>
</html>

Keywords

JavaScript AJAX sessionStorage cookies jQuery

Related Questions