浏览器返回上一页定位问题js处理

项目中一个页面需要实现点击链接跳转之后，再返回上一页，能够定位到曾经点击的位置，在商城首页、产品列表页、文章列表页等经常会有这样的场景。所以把这类需求的实现方式大概研究了一下。目前想到的思路有以下几个：

1）使用浏览器历史记录history进行定位

a. 点击的时候记录点击的元素，记录到history的location.hash，当浏览器回退上一页的时候解析location.hash，定位到该元素

借用网上的一段代码，展示一下思路，实际自己用的时候是需要对应的修改的

//定位，主要是初始化第几个tab，适用于有二级内容的场景
function initPos() {
        var hashs = location.hash.slice(1).split('&');
        hashs = hashs.map(function(hash){  //url解码
            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。这时候会定位不成功。所以还需要在加载好数据之后，再保证一下。

1 2 3 4 5 6 7 8 9

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

b.点击的时候记录当前窗口滚动的距离，记录到history的location.hash，当浏览器回退上一页的时候解析location.hash，滚动到对应距离

//绑定点击事件
	$('[data-link]').on('click',function(event) { 
		//阻止默认跳转行为，阻止冒泡
		event.preventDefault();
		event.stopPropagation();
		history.replaceState('', document.title, location.href.replace(location.hash, "") + "#nowTop=" + $(window).scrollTop());
		window.location.href=$(this).attr('data-link');
	});
	//页面回退显示时的判断
	if ($('body').height() > nowTop) {
		window.scrollTo(0, nowTop);
	}

2）使用ajax实现不刷新的“假”跳转

a. 利用ajax实现，原来的页面作为一个div，点击链接隐藏原来的div展示新的div，关闭新div显示原来的div；当然打开的新div是需要使用ajax或者类似方式进行数据绑定的

b. 利用VUE等框架做单页面的应用也能实现效果，对此了解不多，大概原理应该类似

 

3）我们项目中的场景，由于页面上面的元素都是绝对定位出来的，父元素都没有高度，无法获取window的滚动距离，所以无法使用滚动距离的方式（这种方式是体验比较好的）

所以，只能对元素进行定位，好的是，项目的前端页面写的还是比较规范的，只需要对页面中所有的a标签进行对应的处理就可以；写在这里以留备忘：

//点击a标签链接时
        $('a').on('click',function(event) { 
            //阻止默认跳转行为，阻止冒泡
            event.preventDefault();
            event.stopPropagation();
            //如果是空链接则return
            if($(this).attr('href')=='#'){
                return;
            }
            // 获取当前元素的a顺序位置
            var aindex = $(this).index('a');
            //操作保存浏览器的历史记录
            history.replaceState('', document.title, location.href.replace(location.hash, "") + "#" + aindex);
            //跳转新页面
            window.location.href=$(this).attr('href');
        });
        //页面回退时
        if(location.hash!=''){
            var as = document.getElementsByTagName('a');
            var aindex = location.hash.substr(1);
            as[aindex].setAttribute('name',"index"+aindex);
            location.hash = "#index"+aindex;
        }

部分代码参考：https://www.jb51.net/article/99485.htm