微信浏览器点击系统返回，安卓返回会重载页面回到页面顶部，iOS则返回则会保留之前浏览位置的解决方法

2024年3月27日 185次阅读 来源: clara89

后续补充： 页面css设置了height： 100%，来避免使用fixed定位弹窗引起的部分机型兼容问题，因此会在返回的时候回到页面顶部，补充解决办法： 在弹窗出现的时候在设置100%高度，并让文档滚动到之前滚动的位置，弹窗关闭的时候取消高度限制，body滚动还原

在近期做的一个移动端分享到微信的页面时，遇到了这样一个现象：

在A页面中部点击链接跳转到B页面后，按系统返回操作回到A页面时，

在安卓中刷新重载显示页面的顶部开始，

iOS中则直接返回上次浏览位置，保存了用户操作记录；

针对上述问题，在网上查找了相关解决办法，说的都比较概括，用了一天的时间才解决掉这个问题（蠢哭(╥╯^╰╥)），下面将我的方法贴出来，希望能给到像我之前一样走弯路的童鞋一些帮助吧，主要适用于单页面间的跳转。用到了sessionStorage 和 history的replaceState方法。具体代码如下：
html部分:

<a data-h5="1" href="https://segmentfault.com/"><span class="img"><img src="./images/vip/img-book2.png" alt="全球好书"></span<b>如何高效学习</b></a>

js部分:

$('a[data-h5="1"]').on('click', function () {
    // 点击链接记录当前页面滚动位置
    sessionStorage.setItem('scrollTop', $('.body').scrollTop());
});

// 判断当前页面是否返回还是直接跳转的，读取sessionStorage缓存显示页面
if (sessionStorage.getItem('scrollTop') != null && sessionStorage.getItem('loadType') == 'back') {
    // 避免载入延时处理
    setTimeout(function(){
        // 执行缓存信息
        $('.body').scrollTop(sessionStorage.getItem('scrollTop'));
        // 清除上次缓存
        sessionStorage.removeItem('scrollTop');
    },200);

}
// 设置缓存页面加载来源信息，load：直接跳转，back:浏览器返回
sessionStorage.setItem('loadType', 'load');
// 设置浏览器history,用来监测页面返回
replaceHistory(window.location.href);

// 监测浏览器返回事件，设置返回页面缓存状态
window.addEventListener("popstate", function (e) {
    // 设置sessionStorage中页面返回参数标记
    sessionStorage.setItem('loadType', 'back');
}, false);

function replaceHistory(url) {
    var state = {
        title: "title",
        url: url
    };
    window.history.replaceState(state, "title", url);
}

至此，微信浏览器按返回不能保存之前界面的浏览位置信息的问题就解决了，如果有更好的解决办法，欢迎大家一起交流讨论哈~~
一个小问题花费那么多的时间来解决真的很头疼，自身能力真的还差太多。。。修炼中。。。。

    原文作者：clara89
    原文地址: https://segmentfault.com/a/1190000015430471
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞