Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

PHP Page load/refresh to exact position

Tags:

php

href

refresh

What I'm trying to do is to pass a user to a php script via a href link, then have them passed back to exactly the same position that they were at before they clicked the link, like the page hasn't been refreshed. Does anyone know if or how this could be possible possible? Thank you.

like image 660
user2516546 Avatar asked Dec 16 '22 08:12

user2516546


2 Answers

Using HTML you can have the following

<p id='open_here'><a href='script.php'> Send to script </a> </p>

And then you can link back to that exact position with

<a href="mypage.html#open_here">Send Back to page</a>

So essentially, instead of using a regular link as in the previuos code snippet, you could redirect back to the page using

//php redirect
<?php header('Location: mypage.html#open_here'); ?>

//Javascript redirect
<script type='text/javascript'>
    window.location = "mypage.html#open_here";
</script>
like image 125
Richard Abercrombie Avatar answered Jan 03 '23 06:01

Richard Abercrombie


If you don't mind adding some Javascript to make it work, here is a solution that will make it possible to redirect back to the exact same scrollbar position as when the user clicked the link.

index.php (the file where the link is)

<script>
    window.addEventListener('load', function() {
        // Do we have a #scroll in the URL hash?
        if(window.location.hash && /#scroll/.test(window.location.hash)) {
            // Scroll to the #scroll value
            window.scrollTo(0, window.location.hash.replace('#scroll=', ''));
        }

        // Get all <a> elements with data-remember-position attribute
        var links = document.querySelectorAll('a[data-remember-position]');

        if(links.length) {
            // Loop through the found links
            for(var i = 0; i < links.length; i++) {
                // Listen for clicks
                links[i].addEventListener('click', function(e) {
                    // Prevent normal redirection
                    e.preventDefault();

                    // Redirect manually but put the current scroll value at the end
                    window.location = this.href + '?scroll=' + window.scrollY;
                });
            }
        }
    });
</script>

page.php (the PHP script that redirects back)

<?php

// Get the provided scroll position if it exists, otherwise put 0
$scrollPos = (array_key_exists('scroll', $_GET)) ? $_GET['scroll'] : 0; 

// Redirect back to index.php and provide the scroll position as a hash value
header('Location: index.php#scroll='.$scrollPos);

Hope it helps! :)

like image 37
Jesper Lindström Avatar answered Jan 03 '23 07:01

Jesper Lindström