vue 返回顶部

三155

已于 2022-03-05 18:03:47 修改

阅读量465

点赞数

文章标签： javascript 开发语言 ecmascript

于 2022-03-05 17:43:52 首次发布

本文链接：https://blog.csdn.net/Beloved_Jodie/article/details/123298226

版权

vue 返回顶部

<template>
	<div>
		<div style="
              height: 600px;
              padding: 10px;
              overflow-y: auto;
              overflow-x: hidden;
            " 
            @scroll="myFunction($event)">
            <div id="arrowup">
            	...
            </div>
		</div>
        <!-- 返回顶部   ref获取元素-->
        <div id="UP" ref="refUP" v-show="isShow">
           <a href="#arrowup">
             <a-icon style="fontSize:50px;color:" type="arrow-up" /> 
           </a>
         </div>
	</div>
</template>
<script>
	export default {
		data(){
			return {
				isShow:false,
			}
		}
		methods: {
		    // 返回顶部
		    myFunction(e) {
		      if(e.srcElement.scrollTop > 100){
		        // console.log(e.srcElement.scrollTop);
		        // this.$refs.refUP.style.display="block"
		        this.isShow=true
		      }else{
		        // this.$refs.refUP.style.display="none"
		        this.isShow=false
		      }
		    },
		}
	}
</script>
<style scoped>
	#UP{
	  display: none;
	  background-color: rgba(0, 0, 0, 0.1);
	  border-radius: 50%;
	  width: 50px;
	  height: 50px;
	  position:fixed;
	  left: 90%;
	  bottom: 150px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
</style>