标签:show aci relative this div element var add 回到顶部
html:
<div class="totop" id="totop" @click="Top" v-show="totop"> <i class="iconfont icon-zhiding"></i> </div>
css:
.totop{ position: fixed; width: 2.5rem ;/* 40/16 */ height: 2.5rem; border-radius: 1.25rem /* 20/16 */; opacity: 0.8; background: rgba(255,255,255,.9); box-shadow: 0 1px 5px 0 #e0e0e0; right: 1.125rem; /* 18/16 */ bottom: 6rem; /* 64/16 */ z-index: 1100; -webkit-transition: opacity .5s; transition: opacity .5s; i{ font-size: 1.5rem; color: #e2294c; margin: 0 0 0 0.5rem; position: relative; top: 0.5rem; } }
vue.js
mounted(){ window.addEventListener(‘scroll‘, this.scrollToTop) }, destroyed () { window.removeEventListener(‘scroll‘, this.scrollToTop); },
Top(){ var scrolltop = document.documentElement.scrollTop || document.body.scrollTop; document.documentElement.scrollTop = document.body.scrollTop =0; // scroll(‘0px‘, 300); },
标签:show aci relative this div element var add 回到顶部
原文地址:https://www.cnblogs.com/yuanxinru321/p/9765510.html