scollIntoView() 与 onload 一起工作，但如果我们通过 link 到达站点则不行

Question

考虑以下代码：

    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>';

以及以下URL：

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

如果我从同一服务器上的另一个 URL 到达这个 URL，或者如果我按 F5 刷新说 URL，我会很高兴。

但是，当我从电子邮件中的 link 到达此 URL 时，页面不会滚动。页面显示出来，我要按F5才能真正到达锚点。

当页面不滚动时，显示控制台日志 (GO TO x)，其中 x 具有正确的数字。只有 scrollIntoView 什么都不做。

这是在 Chrome。怎么会？

Answer 1

你不能只使用数字到 id，我用 ?anchor=test 测试，比如：

正确代码：

<?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>

scollIntoView() 与 onload 一起工作，但如果我们通过 link 到达站点则不行

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

javascript

onload

js-scrollintoview