zoukankan      html  css  js  c++  java
  • 移动端Vue回到顶部

    html:

    <div class="totop" id="totop" @click="Top" v-show="totop">
       <i class="iconfont icon-zhiding"></i>
    </div>

    css:

    .totop{
            position: fixed;
             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);
    },
  • 相关阅读:
    各种有趣言论收集
    人类未来进化方向恶考
    mysql 列所有表行数
    恩,有那么一个人
    00后厉害哇
    。。。。
    放弃微博,继续回来写月经
    嘿,大家还好吗
    git
    require js
  • 原文地址:https://www.cnblogs.com/yuanxinru321/p/9765510.html
Copyright © 2011-2022 走看看