VUE 实现滚动条定位以及返回上一页，滚动条固定在原来位置

最新推荐文章于 2023-09-11 19:06:33 发布

原创最新推荐文章于 2023-09-11 19:06:33 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种在网页滚动位置进行保存和恢复的方法。通过监听滚动事件并将滚动位置存储到本地存储中，再利用Vue的watch和nextTick函数，在页面重新加载时精确恢复到之前的滚动位置。这一技巧对于提升用户体验，特别是在长页面或复杂应用中非常有用。

//1.获取滚动条的位置，并存到缓存里
<script>
    document.onscroll = function(){
        getScrollTop()
    }
    function getScrollTop(){
        var scrollTop=0;
        if(document.documentElement&&document.documentElement.scrollTop){
            scrollTop=document.documentElement.scrollTop;
        }else if(document.body){
            scrollTop=document.body.scrollTop;
        }
        localStorage.setItem('position_data',scrollTop);
    }
</script>


//2.渲染完页面，从缓存里取出滚动条的位置：运用了vue的watch和nextTick函数，missionData是数据
    watch:{
            missionData: function(){
                this.$nextTick(() => {
                    console.log(localStorage.getItem('position_data'))
                    window.scrollTo(0, parseInt(localStorage.getItem('position_data')))
                })
            }
        }