亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue怎么實現回到頂部top效果

發布時間:2022-03-07 15:29:13 來源:億速云 閱讀:840 作者:iii 欄目:web開發

本篇內容主要講解“vue怎么實現回到頂部top效果”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“vue怎么實現回到頂部top效果”吧!

html

    <div class="totop" v-show="toTopShow" @click="toTop()">top</div>

css

.totop {

  width: 50px;

  height: 50px;

  line-height: 50px;

  border-radius: 25px;

  background-color: white;

  position: fixed;

  bottom: 75px;

  right: 10px;

  text-align: center;

}

data

 data() {

    return {

  toTopShow: false,

      srcoll: 0,

}

},

監聽事件

  watch: {

    srcoll() {

      if (this.srcoll > 400) {

        this.toTopShow = true;

      } else {

        this.toTopShow = false;

      }

    },

  },

加載事件

 mounted() {

    window.addEventListener("scroll", this.srcollShow);

  },

methods:

 methods: {

    srcollShow() {

      this.srcoll =

        window.pageYOffset ||

        document.documentElement.scrollTop ||

        document.body.scrollTop;

    },

 toTop() {

      this.toTopSpeed = setInterval(() => {

        document.documentElement.scrollTop =

          document.documentElement.scrollTop - 20;

//通過改變數字實現動畫延遲滾動

        if (this.srcoll < 10) {

          clearInterval(this.toTopSpeed);

        }

      }, 1);

    },

}

以上操作實現通過監聽滾動條>400后,top按鈕出現,并且點擊top按鈕,慢慢回到頂部,低于400隱藏,img以此類推

到此,相信大家對“vue怎么實現回到頂部top效果”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

vue
AI

额济纳旗| 延寿县| 菏泽市| 大同县| 教育| 民乐县| 泰顺县| 吴江市| 英山县| 德州市| 舟山市| 天祝| 大厂| 广平县| 哈尔滨市| 永年县| 甘德县| 醴陵市| 静海县| 德令哈市| 略阳县| 仙居县| 汕头市| 定襄县| 益阳市| 台中县| 沽源县| 南安市| 宜良县| 临洮县| 运城市| 德惠市| 淮滨县| 和平县| 郸城县| 西华县| 绩溪县| 乌拉特前旗| 余江县| 进贤县| 吉木乃县|