JS實(shí)現(xiàn)頁(yè)面進(jìn)入和返回定位到具體位置
其實(shí)瀏覽器也自帶了返回的功能，也就是說(shuō)，自帶了返回定位的功能。正常的跳轉(zhuǎn)，返回確實(shí)可以定位，但是有些特殊場(chǎng)景就不適用了。例如，某些元素是在某種情況下才加上的，又或者多級(jí)定位。
目前，我知道的返回定位到具體位置有兩種方法：
①利用id定位，在跳轉(zhuǎn)的時(shí)候帶上某個(gè)模塊的id，返回的時(shí)候定位到該處。
②利用距離頂部的距離，在跳轉(zhuǎn)的時(shí)候帶上當(dāng)前位置滾動(dòng)過(guò)的距離，返回的時(shí)候定位到該處。
一般應(yīng)用場(chǎng)景：
定位到某一個(gè)模塊的時(shí)候，有二級(jí)定位的時(shí)候利用方法①.
定位到具體位置的時(shí)候，定位到某一個(gè)模塊的時(shí)候，利用方法②。
有二級(jí)定位的時(shí)候具體實(shí)現(xiàn)方法：
1.常見的場(chǎng)景就是有一個(gè)tab模塊，tab模塊下面有相應(yīng)的內(nèi)容，進(jìn)入的時(shí)候需要定位到某個(gè)tab的某個(gè)位置。
場(chǎng)景如圖：
2..初始化頁(yè)面的時(shí)候，需要給每個(gè)模塊指定一個(gè)唯一的id。打開頁(yè)面的時(shí)候，如果url帶著位置參數(shù)則解釋參數(shù)定位，如果沒有，默認(rèn)為第一個(gè)。代碼邏輯如下：
function() initPos{//定位，主要是初始化第幾個(gè)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]) 第幾個(gè)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);//加載對(duì)應(yīng)tab下面的內(nèi)容
注意，如果tab下的內(nèi)容是后來(lái)加載的，可能會(huì)出現(xiàn)，解析到url后。在頁(yè)面上，由于加載時(shí)間的關(guān)系，沒有找到對(duì)應(yīng)的tab下面具體模塊的id。這時(shí)候會(huì)定位不成功。所以還需要在加載好數(shù)據(jù)之后，再保證一下。
保證邏輯：
if(contentHash){
var _contentHash = contentHash;
window.onload = function(){
setTimeout(function(){
location.hash = _contentHash;
},0)
}
contentHash = '';
}
利用距離頂部的距離定位的具體實(shí)現(xiàn)方法：
1.頁(yè)面有跳轉(zhuǎn)的地址，不是直接link過(guò)去。要帶著當(dāng)前位置滾動(dòng)過(guò)距離跳轉(zhuǎn)。
$('[data-link]').on('click',function(event) { //阻止默認(rèn)跳轉(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());
}
兩種實(shí)現(xiàn)方式的原理和實(shí)現(xiàn)都非常簡(jiǎn)單。不過(guò)要思路清晰才行，不然很容易出錯(cuò)。
以上所述是小編給大家介紹的JS實(shí)現(xiàn)頁(yè)面進(jìn)入和返回定位到具體位置，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)滑動(dòng)操作代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
詳解JavaScript中的強(qiáng)制類型轉(zhuǎn)換和自動(dòng)類型轉(zhuǎn)換
這篇文章中我們將深入探索一下 JavaScript 中的類型轉(zhuǎn)換,揭示強(qiáng)制類型轉(zhuǎn)換、自動(dòng)類型轉(zhuǎn)換和轉(zhuǎn)換函數(shù)的奧秘,快跟隨小編一起學(xué)習(xí)一下吧2023-12-12
這篇文章主要介紹了小程序橫屏方案對(duì)比，實(shí)現(xiàn)橫屏的方案也有多種，但是每種方案都有一定的缺陷，恰巧最近也在橫屏方案上踩了不少坑，本文就一起來(lái)介紹一下吧2020-06-06
JavaScript?error瀏覽器端錯(cuò)誤捕獲處理方法筆記解決示例
這篇文章主要為大家介紹了JavaScript?error瀏覽器端錯(cuò)誤捕獲處理方法筆記解決示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要給大家介紹了關(guān)于JavaScript中引用vs復(fù)制的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
javascript實(shí)現(xiàn)類似百度分享功能的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)類似百度分享功能的方法,以實(shí)例形式較為完整的分析了基于javascript實(shí)現(xiàn)百度分享功能所涉及的樣式與分享功能實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
今天小編就為大家分享一篇layui富文本編輯器前端無(wú)法取值的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
本文介紹了一款基于HTML，CSS，JAVASCRIPT的簡(jiǎn)潔靈活的流行前端框架，需要了解的朋友可以參考下2015-07-07
three.js創(chuàng)造時(shí)空裂縫特效實(shí)現(xiàn)示例
這篇文章主要為大家介紹了three.js創(chuàng)造時(shí)空裂縫特效實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
javascript 兼容FF的onmouseenter和onmouseleave的代碼
經(jīng)過(guò)測(cè)試發(fā)現(xiàn)，例子1 在 ff下抖動(dòng)的厲害，ie下稍微有點(diǎn)。 具體原因 其實(shí)就是 mouseout 的冒泡機(jī)制 引起的。2008-07-07