2013-07-09 49 views
3

我想要做的是通過href鏈接將用戶傳遞給php腳本,然後讓它們返回到與它們在點擊前一樣的位置鏈接,就像頁面沒有被刷新一樣。有人知道這是可能的嗎?謝謝。PHP頁面加載/刷新到確切位置

回答

6

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

所以基本上,而是採用了常規鏈接爲上一段中碼snippet,你可以重定向回頁面使用

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

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

感謝理查德。我曾想過如果這樣做,但我只是想知道是否有一種更流暢的方式來做到這一點。有點像一個JavaScript虛假的回報,但在PHP! – user2516546

+0

我不相信你會在嚴格的php中這樣做。如果您使用不帶參數的jQuery scrollTop來獲取其當前的垂直滾動位置,然後再次使用scrollTop並將該位置作爲參數移動到頁面中的該位置。您可以通過ajax運行php,併成功移動到該​​位置,或者您可以將該位置傳遞給腳本並返回。儘管如此,這可能會很麻煩 –

1

我只是溢出ID在這裏eas,但我會使用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部分

我知道這不是一個非常具體的答案,但希望我已經給你一些線索和想法如何實現這一點。讓我知道它是如何工作的!

1

如果您不介意添加一些Javascript來使其工作,這裏有一個解決方案,可以重新定位到與用戶單擊鏈接時完全相同的滾動條位置。

index.php(即重定向回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 

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

希望它能幫助! :)

0

我不得不記得滾動位置<選擇>。下面的例子。三個 提交按鈕來說明爲什麼有三個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>";