vue移动端页面返回顶部

页面滚动到一定高度出现返回顶部按钮，点击返回顶部，按钮消失

以下代码，新建组件，引用方可使用

<template>
  <div id="default_drag_return" @click="topreturn()">
	  ↑
	  </div>
</template>

<script>
export default {
  name: "returntop",
  data() {
    return {
      
    };
  },

  components: {},

  computed: {},

  mounted() {
	window.addEventListener('scroll',function(){
	 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
	 if(scrollTop>800){
		 document.getElementById("default_drag_return").style.visibility="visible";
		 
	 }
	 if(scrollTop<800){
		 document.getElementById("default_drag_return").style.visibility="hidden";
	 }
	 });
  },

  methods: {
	  topreturn:function(){
		  document.documentElement.scrollTop = document.body.scrollTop =0;
		  document.getElementById("default_drag_return").style.visibility="hidden";
		  
	  }
  }
};
</script>
<style scoped lang="scss">
#default_drag_return{
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	font-size: 0.5rem;
	background:rgba(230, 230, 230, 0.7); 
	position: fixed;
	z-index: 1000;
	bottom: 1.4rem;
	right: 0.4rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	color:#a3aa97;
}
</style>