通过sessionStorage会话存储实现页面跳转之后返回到当前位置（刷新跳回顶部）【2】

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>点击跳转返回当前点击的位置</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #app{
            width: 100%;
            height: 100%;
            background: pink;
            overflow: hidden;
        }
        a{
            display: block;
            width: 90%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            margin: 30px auto;
            border: 2px dashed red;
            background: skyblue;
        }
    </style>
</head>
<body>
    <div id="app" @click="allSee">
        <a :href="href" v-for="item in list"> {{ item.title }} </a>
    </div>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
     <script>
        var vm = new Vue({
            el:"#app",
            data:{
                list:[],
                href:'https://www.baidu.com'
            },
            methods:{
                allSee(){
                    //点击获取高度
                    var scroll = document.documentElement.scrollTop || document.body.scrollTop;
                    sessionStorage.setItem('scroll',scroll)
                },
                //请求数据
                async getData(){
                    const {data} = await axios.post('https://bj.qhtest.site/byzz/v1.game_live/eventDetails',{mid:118303,type:'all',thirty:1,page:1})
                    if(data.Code == 200){
                        this.list = data.Data.list
                        this.getSession() //在数据请求成功之后获取session
                    }
                },
                //获取session
                getSession(){
                    // this.$nextTick() 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
                    this.$nextTick(()=>{//这个需要延迟加载否则为0
                        var scrolltop = Number(sessionStorage.getItem('scroll'))
                        document.documentElement.scrollTop = document.body.scrollTop = scrolltop
                        //赋值成功之后要清除 否则 再次刷新无法回到顶部
                        sessionStorage.removeItem('scroll')
                    })
                }
            },
            created(){
                this.getData()
            },
//          mounted(){
//              this.getData()
//          },
        })
     </script>
</body>
</html>

通过sessionStorage会话存储实现页面跳转之后返回到当前位置 （刷新跳回顶部）【2】

猜你喜欢

通过sessionStorage会话存储实现页面跳转之后返回到当前位置（刷新跳回顶部）【2】