其實瀏覽器也自帶了返回的功能，也就是說，自帶了返回定位的功能。正常的跳轉，返回確實可以定位，但是有些特殊場景就不適用了。例如，某些元素是在某種情況下才加上的，又或者多級定位。
目前，我知道的返回定位到具體位置有兩種方法：
①利用id定位，在跳轉的時候帶上某個模塊的id，返回的時候定位到該處。
②利用距離頂部的距離，在跳轉的時候帶上當前位置滾動過的距離，返回的時候定位到該處。
一般應用場景：
定位到某一個模塊的時候，有二級定位的時候利用方法①.
定位到具體位置的時候，定位到某一個模塊的時候，利用方法②。
有二級定位的時候具體實現方法：
1.常見的場景就是有一個tab模塊，tab模塊下面有相應的內容，進入的時候需要定位到某個tab的某個位置。
場景如圖：
2..初始化頁面的時候，需要給每個模塊指定一個唯一的id。打開頁面的時候，如果url帶著位置參數則解釋參數定位，如果沒有，默認為第一個。代碼邏輯如下：
function() initPos{//定位，主要是初始化第幾個tabvar 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]) 第幾個tabcontentHash = 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實現頁面進入和返回定位到具體位置，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
