通过sessionStorage会话存储实现页面跳转之后返回到当前位置 （刷新跳回顶部）
Posted a-pupil
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过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>点击跳转返回当前点击的位置</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会话存储实现页面跳转之后返回到当前位置 （刷新跳回顶部）的主要内容，如果未能解决你的问题，请参考以下文章
在PHP和JavaScript中设置Cookie会话存储（SessionStorage）和本地存储（LocalStorage）