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); },