scollIntoView() works with onload, but not if we arrive at site via link

Question

Consider the following code:

    session_start();
    if (isset($_GET['anchor']))
    {
        $_SESSION['gotoanchor'] = $_GET['anchor'];
    } else if (!isset($_SESSION['gotoanchor']))
    {
        $_SESSION['gotoanchor'] = '';
    }

    echo '<script type="text/javascript">';
    echo "window.addEventListener('load', function () {
    let jumpsegmentname = 'anchor" . $_SESSION['gotoanchor'] . "';
    let jumpsegment = document.getElementById('anchor" . $_SESSION['gotoanchor'] . "');
        if (jumpsegment != null) {
            console.log('GO TO:' + jumpsegmentname); 
            document.getElementById(jumpsegmentname).scrollIntoView();  
        }
    })";
    echo '</script>';

And the following URL:

http://localhost/translateb.php?anchor=36

I am neatly transported if I arrive at this URL from another URL on the same server, or if I refresh said URL by pressing F5.

However, when I arrive at this URL from a link in an e-mail, the page does not scroll. The page is displayed, and I have to press F5 to actually arrive at the anchor.

When the page does not scroll, the console log (GO TO x) is displayed, where x has the correct number. Only scrollIntoView does nothing.

This is in Chrome. How come?

instead of `$_SESSION` you need to use `$_GET` for catch `anchor=36` — Simone Rossaini, May 19 '21 at 08:53
In the code before that, the value of $_GET is put into $_SESSION. I will clarify this. — Loek van Kooten, May 19 '21 at 08:58
Oh now i see the real problem, do you have an element with only id 32, but you can't have id with only number. — Simone Rossaini, May 19 '21 at 09:43
Actually with just id it always worked (from the browser's URL bar, but not via a link in e-mail), but I have now changed the code to use 'anchor' + id instead. However, I'm afraid this makes no difference. — Loek van Kooten, May 19 '21 at 10:18

Simone Rossaini · Accepted Answer · 2021-05-19T10:07:21.097

1

You can't use only number into id, i test with ?anchor=test like:

Correct code:

<?php
session_start();
$_SESSION['gotoanchor'] = (isset($_GET['anchor'])) ? $_GET['anchor'] : '';
?>

<div id='test'>ops</div>
<script type="text/javascript">
    window.addEventListener('DOMContentLoaded', function () {
        let jumpsegment = document.getElementById('<?php echo $_SESSION['gotoanchor']; ?>');
        if (jumpsegment) {
            jumpsegment.scrollIntoView();
        }
    });
</script>

edited May 19 '21 at 10:07

answered May 19 '21 at 09:55

Simone Rossaini

8,115
1
13
34

Actually with just id it always worked (from the browser's URL bar, but not via a link in e-mail), but I have now changed the code to use 'anchor' + id instead. However, I'm afraid this makes no difference. – Loek van Kooten May 19 '21 at 10:18
I tested the code above in local, all work, so you have another problem we can't see – Simone Rossaini May 19 '21 at 10:21
Can you give me a link for see problem? – Simone Rossaini May 19 '21 at 10:22
That is very hard actually. This is part of a much bigger, quite confidential project. I can record a video if you want, but the most important question I think is: did you test this from a link in e-mail software? Because that it the only instance in which it doesn't work. – Loek van Kooten May 20 '21 at 11:09
doesn't matter where link is, if is a good link `website.com?parameter=id` this code must work. – Simone Rossaini May 20 '21 at 11:11
This suddenly started working. The only conclusion I can draw is that Chrome was behaving badly, as absolutely nothing has changed in the code. So you were right from the start: this should just work. Restarting the system solved the issue. I wish I could give you a thumbs up for this. Feel free to post this as an answer and I will do so. – Loek van Kooten May 20 '21 at 11:59
Actually I think that in first instance, it didn't work. That adding text to the id did the trick, but that it took a restart for Chrome to actually pick it up (cache issues)? – Loek van Kooten May 20 '21 at 12:00
_Feel free to post this as an answer_ is that an answer :D, for the problem 99% was cache problem for sure. – Simone Rossaini May 20 '21 at 12:08
1

Done! Overlooked that. Once more thank you very much for your help. – Loek van Kooten May 21 '21 at 13:30

scollIntoView() works with onload, but not if we arrive at site via link

1 Answers1