DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript技巧 >> JS實現頁面進入和返回定位到具體位置
JS實現頁面進入和返回定位到具體位置
編輯:JavaScript技巧     

其實浏覽器也自帶了返回的功能,也就是說,自帶了返回定位的功能。正常的跳轉,返回確實可以定位,但是有些特殊場景就不適用了。例如,某些元素是在某種情況下才加上的,又或者多級定位。

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

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

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

一般應用場景:

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

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

有二級定位的時候具體實現方法:

1.常見的場景就是有一個tab模塊,tab模塊下面有相應的內容,進入的時候需要定位到某個tab的某個位置。

場景如圖:

2..初始化頁面的時候,需要給每個模塊指定一個唯一的id。打開頁面的時候,如果url帶著位置參數則解釋參數定位,如果沒有,默認為第一個。代碼邏輯如下:

function() initPos{//定位,主要是初始化第幾個tab
var hashs = location.hash.slice(1).split('&');
hashs = hashs.map(function(hash){
return decodeURIComponent(hash)
})
if(parseInt(hashs[0])>=0&&parseInt(hashs[0])<100){
navHash = parseInt(hashs[0]) 第幾個tab
contentHash = hashs[1] tab下的具體模塊id
}
}
var $root=$('ul');
if(navHash && $root.find('li')[navHash].length){
$root.find('li')[navHash].addClass('cur'); 
}else{
$root.find('li')[0].addClass('cur');
}
loadTabContent(tabIndex,initContent);//加載對應tab下面的內容

注意,如果tab下的內容是後來加載的,可能會出現,解析到url後。在頁面上,由於加載時間的關系,沒有找到對應的tab下面具體模塊的id。這時候會定位不成功。所以還需要在加載好數據之後,再保證一下。

保證邏輯:

if(contentHash){
var _contentHash = contentHash;
window.onload = function(){
setTimeout(function(){
location.hash = _contentHash;
},0)
} 
contentHash = '';
}

利用距離頂部的距離定位的具體實現方法:

1.頁面有跳轉的地址,不是直接link過去。要帶著當前位置滾動過距離跳轉。

$('[data-link]').on('click',function(event) { //阻止默認跳轉行為,阻止冒泡<br> event.preventDefault();
event.stopPropagation();
savePage();
window.location.href=$(this).attr('data-link');
});
function savePage(){ //操作浏覽器的歷史記錄
history.replaceState('', document.title, location.href.replace(location.hash, "") + "#nowTop=" + $(window).scrollTop());
}

兩種實現方式的原理和實現都非常簡單。不過要思路清晰才行,不然很容易出錯。

以上所述是小編給大家介紹的JS實現頁面進入和返回定位到具體位置,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved