PHP页面加载/刷新到准确位置


PHP Page load/refresh to exact position

我要做的是通过href链接将用户传递到php脚本,然后将他们传递回与单击链接前完全相同的位置,就像页面尚未刷新一样。有人知道这是否可能或如何可能吗?非常感谢。

使用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>

因此,本质上,您可以使用重定向回页面,而不是像前面的代码片段中那样使用常规链接

//php redirect
<?php header('Location: mypage.html#open_here'); ?>
//Javascript redirect
<script type='text/javascript'>
    window.location = "mypage.html#open_here";
</script>

如果您不介意添加一些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);

希望它能有所帮助!:)

我只是在这里透露一些想法,但我会使用javascript拦截用户对href的点击,并首先使用.prventDefault。然后找出用户在页面上的位置。也许可以通过将页面划分为多个部分,通过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节

我知道这不是一个非常具体的答案,但希望我已经给了你一些线索和想法,如何做到这一点。让我知道它是如何工作的!

我必须记住<选择>。以下示例。三submit按钮来说明为什么有三个getElementById。查看它工作你必须移动滚动条第一

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

我在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>