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

<!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>监听scrollTop</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            #app {
                width: 100%;
                height: 2000px;
                background: pink;
                overflow: hidden;
            }
            
            .link {
                display: block;
                width: 30px;
                height: 30px;
                background: skyblue;
                border-radius: 50%;
                position: fixed;
                bottom: 30px;
                right: 16px;
            }
            .aa{
                width: 90%;
                height: 60px;
                background: pink;
                display: block;
                border: 1px dashed red;
                margin: 0 auto;
                margin-top: 30px;
                line-height: 60px;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="app" @click="getScrolls">
            <a class="aa" :href="linke" v-for="item in datas">{{item.name}}</a>
            <a class="link" attr="https://www.baidu.com"></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: {
                    linke: 'https://www.baidu.com',
                    page: 1,
                    datas:[]
                },
                methods: {
                    //点击用于session存储数据
                    getScrolls() {
                        var scrTop = document.documentElement.scrollTop || document.body.scrollTop;
                        sessionStorage.setItem('scroll', scrTop)
                    },
                    //在设置document.documentElement.scrollTop 之后就清楚session中的数据
                    autoScroll(){
                        let scrollTop = Number(sessionStorage.getItem('scroll'))
                        document.documentElement.scrollTop = scrollTop
                        //通过$nextTick方式进行删除
//                      this.$nextTick(()=>{
//                          sessionStorage.removeItem('scroll')
//                      })
                        sessionStorage.removeItem('scroll') //可直接删除
                    },
                    async ajaxdata() {
                        //接口处理
                        const {data} = await axios.post('https://bj.qhtest.site/byzz/v1.Injured/injuredData', {type_name: 1,type_state:1})
                        if(data.Code == 200){
                            this.datas = data.Data
                            this.autoScroll()
                        }
                        
                    }
                },
                mounted() { //只要页面一进来就能够执行
                    this.ajaxdata();
                }
            })
        </script>
    </body>

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

猜你喜欢

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