關於頁面js定位

 目前,我知道的返回定位到具體位置有兩種方法:javascript

①利用id定位,在跳轉的時候帶上某個模塊的id,返回的時候定位到該處。html

②利用距離頂部的距離,在跳轉的時候帶上當前位置滾動過的距離,返回的時候定位到該處。java

通常應用場景:ajax

定位到某一個模塊的時候,有二級定位的時候利用方法①.code

定位到具體位置的時候,定位到某一個模塊的時候,利用方法②。htm

下邊就着重說明方法①:有兩種方式能夠實現ip

第一:經過html錨點實現滾動定位到頁面指定位置(DIV) input

<a href="#abc">點擊跳轉</a>

   點擊上面A連接將會滾動跳轉到同一頁面中id="abc"的那個div處,須要注意的是跳轉指定位置div的id是惟一的,A標籤直接指向此id,id前面別忘了加上#號。hash

第二:經過點擊button按鈕使用js實現滾定跳轉到頁面指定位置(DIV)it

<input  type="button" name="Submit" value="提交"  onclick="javascript:onTopClick();" />
<div id="abc">將要跳轉到這裏</div>
<script>
  function onTopClick() {
    window.location.hash = "#abc";
 }
</script>

下邊就舉個今天實現的例子(此例子是:先跳轉到頁面,頁面再調用ajax獲取數據,加載到頁面,加載完成後就定位到某一行)

1.定位前須要先定義好惟一的id

<div id="ad10">
    .........
</div>

2.頁面數據加載完畢後才能執行定位,不然定位無效。示例以下:

這個是無效的

$(function(){
	helpFind(); //請求數據,並加載數據

	window.location.hash="#ad10";//頁面定位

 });

下邊這種纔會起做用

//列表顯示
$(function(){
	helpFind(); //頁面請求數據,並加載數據
	
	setTimeout(function(){  //使用  setTimeout()方法設定定時100毫秒
		   window.location.hash="#ad10";//頁面定位
		},100);
 });
相關文章
相關標籤/搜索