PHP页面加载/刷新到确切位置答案

【问题标题】：PHP Page load/refresh to exact positionPHP页面加载/刷新到确切位置
【发布时间】：2013-07-07 11:59:26
【问题描述】：

我要做的是通过 href 链接将用户传递给 php 脚本，然后让他们传回与点击链接之前完全相同的位置，就像页面没有被刷新了。有谁知道这是否或如何可能？谢谢。

【问题讨论】：

【解决方案1】：

使用 HTML，您可以拥有以下内容

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

然后您可以使用

链接回该确切位置

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

所以本质上，您可以使用

重定向回页面，而不是像之前的代码 sn-p 中那样使用常规链接

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

//Javascript redirect
<script type='text/javascript'>
    window.location = "mypage.html#open_here";
</script>

【讨论】：

谢谢理查德。我曾想过如果这样做，但我只是想知道是否有更顺畅的方法。有点像 javascript false return 但在 php 中！
我不相信你会在严格的 php 中这样做。如果您使用不带参数的 jQuery scrollTop 来获取其当前的垂直滚动位置，然后再次使用该位置作为参数的 scrollTop 移动到页面中的该位置。您可以通过 ajax 运行 php 并成功移动到该位置，或者您可以将该位置传递给脚本并返回。不过，这本身可能会很混乱

【解决方案2】：

如果您不介意添加一些 Javascript 以使其工作，这里有一个解决方案，可以重定向回与用户单击链接时完全相同的滚动条位置。

index.php（链接所在的文件）

<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（重定向回来的 PHP 脚本）

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

希望对您有所帮助！ :)

【讨论】：

迄今为止最好的解决方案，也可以扩展到在同一页面上工作。

【解决方案3】：

我只是在这里散播想法，但我会使用 javascript 来拦截用户对 href 的点击，并首先使用 .preventDefault。然后找出用户在页面上的位置。也许通过将页面拆分为由 ID 标识的部分。您的 html 标记将类似于

<div id="section-1"></div>
<div id="section-2"></div>
<div id="section-3"></div>

所以当 javascript 阻止链接执行时，它会找出用户当前在哪个部分。假设我们知道每个部分的高度。然后我们需要找出滚动条的位置。我还没有这样做，但请看这里

http://api.jquery.com/scrollTop/

一旦我们知道了每个部分的高度，并且一旦我们可以检测到滚动条的位置，我们就可以确定用户所在的部分。然后，我们获取 href 链接的 url 并向其添加查询字符串，例如 http://something.com/script.php?section=2 并使用您想要的任何数据将用户重定向到它。然后，一旦脚本完成它的工作，将查询字符串附加到重定向 uri 并使用 http://something.com#section-2 之类的内容将用户重定向回来，用户将立即弹出到第 2 节

我知道这不是一个非常具体的答案，但希望我已经为您提供了一些线索和想法来实现这一目标。告诉我它是如何工作的！

【讨论】：

【解决方案4】：

我必须记住

<?php
$scrollusObscura=$_GET["imgbtn"];

$header = <<<EOD
<!DOCTYPE html>
<html>
<head>
<title>snk_db</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

<head>
<script>
    function gety(){

        var y=document.getElementById('myUlID').scrollTop;
        document.getElementById('imgbtn1').value=y; 
        document.getElementById('imgbtn2').value=y;
        document.getElementById('imgbtn3').value=y;
    }
    function itemRelevatur(scrollum){
        document.getElementById('myUlID').scrollTo(0, scrollum);
    }
</script>
</head>
<body  onload="itemRelevatur({$scrollusObscura})" >
EOD;
$html= <<<EOD
<div >

<select size="6" id="myUlID" name="myUlName" onscroll="myTimer = setInterval(gety, 300)">
    <option>'1'</option>
    <option>'2'</option>
    <option>'3'</option>
    <option>'4'</option>
    <option>'5'</option>
    <option>'6'</option>
    <option>'7'</option>
    <option>'8'</option>
    <option>'9'</option>
    <option>'10'</option>
    <option>'11'</option>
    <option>'12'</option>
    <option>'13'</option>
    <option>'14'</option>
    <option>'15'</option>
    <option>'16'</option>
    <option>'17'</option>
    <option>'18'</option>
    <option>'19'</option>
</select>

</div>
EOD;


$html1= <<<EOD
<div><form method='GET' action'myscript.php'>
            <input type='hidden' name='imgbtn' id='imgbtn1' value=''></input>
            <input type='submit'  value='Submit' ></input>
</form>
EOD;
$html2= <<<EOD
<form method='GET' action'myscript.php'>
            <input type='hidden' name='imgbtn' id='imgbtn2' value=''></input>
            <input type='submit'  value='Submit' ></input>
</form>
EOD;
$html3= <<<EOD
<form method='GET' action'myscript.php'>
            <input type='hidden' name='imgbtn' id='imgbtn3' value=''></input>
            <input type='submit'  value='Submit' ></input>
</form></div>
EOD;

echo $header;
echo $html;
echo $html1;
echo $html2;
echo $html3."</body></html>";

【讨论】：

【解决方案5】：

我在使用 cookie javascript 库时遇到了重大问题，在我需要滚动 onload 事件之前，大多数 cookie 库加载速度不够快。所以我选择了现代 html5 浏览器来处理这个问题。它将最后滚动位置存储在客户端 Web 浏览器本身中，然后在重新加载页面时从浏览器读取设置回最后滚动位置。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {

    if (localStorage.getItem("my_app_name_here-quote-scroll") != null) {
        $(window).scrollTop(localStorage.getItem("my_app_name_here-quote-scroll"));
    }

    $(window).on("scroll", function() {
        localStorage.setItem("my_app_name_here-quote-scroll", $(window).scrollTop());
    });

  });
</script>

【讨论】：