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

<!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>

posted on 2019-05-05 18:45  A-pupli  阅读(760)  评论(0)  编辑  收藏  举报