js实现网页刷新后滚动条位置不变

最新推荐文章于 2021-08-03 15:48:20 发布

qq_37148195

最新推荐文章于 2021-08-03 15:48:20 发布

阅读量645

点赞数

文章标签： javascript

本文介绍了一种在不使用AJAX的情况下实现页面局部刷新的方法，通过保存和恢复滚动条位置，使得用户体验更加流畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做开发时需要某个页面局部刷新但是因为不可描述的原因又不能写ajax 所以就想用刷新但是滚动条位置不变来实现伪局部刷新找了一下发现确实有实现的方法十分好用

window.onbeforeunload = function () {
    var scrollPos;
    if (typeof window.pageYOffset != 'undefined') {
        scrollPos = window.pageYOffset;
    }
    else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
        scrollPos = document.documentElement.scrollTop;
    }
    else if (typeof document.body != 'undefined') {
        scrollPos = document.body.scrollTop;
    }
    document.cookie = "scrollTop=" + scrollPos; //存储滚动条位置到cookies中
}

window.onload = function () {
    if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
        var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置
        document.documentElement.scrollTop = parseInt(arr[1]);
        document.body.scrollTop = parseInt(arr[1]);
    }
}