本文介绍两种JS实现页面进入和返回时定位到具体位置的方法。方法一利用模块ID，适用于Tab二级定位场景；方法二记录滚动距离，适用于普通模块定位。文中提供了基于hash解析和history API的代码实现，并指出了异步加载内容时的定位注意事项。
页面定位背景与方案概述
浏览器原生具备返回功能，通常能自动处理页面定位。然而，在特定场景下，这种默认行为可能无法满足需求，例如动态添加的元素或涉及多级定位的情况。
目前实现返回时定位到具体位置主要有两种技术手段：
第一种方法是通过ID进行定位。在页面跳转时携带目标模块的ID参数，返回时根据该ID将视图定位至对应位置。
第二种方法是通过记录距离顶部的滚动距离来实现。在跳转时保存当前的滚动偏移量，返回时读取该数值并将页面滚动至指定位置。
这两种方法适用于不同的应用场景：
当需要定位到特定模块且存在二级定位需求时，推荐使用第一种方法（ID定位）。
当只需定位到具体位置或单一模块时，推荐使用第二种方法（滚动距离定位）。
ID定位法实现二级Tab模块
针对存在二级定位的场景，具体实现步骤如下：
常见场景包括包含Tab模块的页面，进入页面时需定位到特定Tab内的具体位置。
场景示意图如下：
页面初始化时，需为每个模块分配唯一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后可能因加载延迟导致无法立即找到对应模块ID，从而导致定位失败。因此，需在数据加载完成后再次执行定位逻辑以确保成功。
二次保证逻辑如下：
if(contentHash){
var _contentHash = contentHash;
window.onload = function(){
setTimeout(function(){
location.hash = _contentHash;
},0)
}
contentHash = '';
}滚动距离定位法实现
利用距离顶部滚动距离进行定位的具体实现方法：
页面跳转需通过地址链接而非直接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实现页面进入和返回定位到具体位置的方法，希望能对读者有所帮助。如有疑问欢迎留言，小编会及时回复。感谢支持！