vue返回頂部元件
阿新 • • 發佈:2019-01-10
頁面滾離頂部一定距離的時候顯示返回頂部圖示,點選按鈕以一定的速度返回頂部。
元件:src/components/GoTop.vue
<template> <div id="goTop"> <div class="goTop" v-show="goTopShow" @click="goTop"> <i class="el-icon-caret-top goTopIcon"></i> </div> </div> </template> <script> export default { name: "goTop", data() { return { scrollTop: "", goTopShow: false }; }, watch: { scrollTop(val) { if (this.scrollTop > 500) { this.goTopShow = true; } else { this.goTopShow = false; } } }, methods: { handleScroll() { this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; if (this.scrollTop > 500) { this.goTopShow = true; } }, goTop() { let timer = null, _that = this; cancelAnimationFrame(timer); timer = requestAnimationFrame(function fn() { if (_that.scrollTop > 0) { _that.scrollTop -= 50; document.body.scrollTop = document.documentElement.scrollTop = _that.scrollTop; timer = requestAnimationFrame(fn); } else { cancelAnimationFrame(timer); _that.goTopShow = false; } }); } }, mounted() { window.addEventListener("scroll", this.handleScroll); }, destroyed() { window.removeEventListener("scroll", this.handleScroll); } }; </script> <style scoped> .goTop { position: fixed; right: 40px; bottom: 60px; width: 40px; height: 40px; border-radius: 50%; background: #fff; padding: 10px; cursor: pointer; box-shadow: 0 0 6px rgba(0, 0, 0, 0.12); } .goTop:hover .goTopIcon { color: rgba(51, 153, 255, 1); } .goTopIcon { font-size: 20px; color: rgba(51, 153, 255, 0.8); } </style>
引用:
<template> <div id="show"> <v-goTop></v-goTop> </div> </template> <script> import GoTop from "./components/GoTop"; export default { data() { return { data: [] } }, components:{ 'v-goTop': GoTop } } </script>