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);//加載對應(yīng)tab下面的內(nèi)容

注意，如果tab下的內(nèi)容是后來加載的，可能會出現(xiàn)，解析到url后。在頁面上，由于加載時間的關(guān)系，沒有找到對應(yīng)的tab下面具體模塊的id。這時候會定位不成功。所以還需要在加載好數(shù)據(jù)之后，再保證一下。

保證邏輯：

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

利用距離頂部的距離定位的具體實現(xiàn)方法：

1.頁面有跳轉(zhuǎn)的地址，不是直接link過去。要帶著當(dāng)前位置滾動過距離跳轉(zhuǎn)。

$('[data-link]').on('click',function(event) { //阻止默認跳轉(zhuǎn)行為，阻止冒泡<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());
}

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

以上所述是小編給大家介紹的JS實現(xiàn)頁面進入和返回定位到具體位置，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: