JS实现刷新页面后回到记录时滚动条的位置

最新推荐文章于 2026-06-14 20:48:43 发布

原创最新推荐文章于 2026-06-14 20:48:43 发布 · 406 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js #javascript

收录于

前段同时被 2 个专栏收录

1 篇文章

订阅专栏

1 篇文章

订阅专栏

本文介绍如何使用JavaScript在页面卸载时将滚动条位置存储到cookies，并在页面加载时读取并还原滚动条。通过window.onbeforeunload事件和cookies技术，确保了用户体验的连续性。

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).load(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]);
		
    }
});

//滚动条会到顶部
function scrollTop() {
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
}