效果：
代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
<template> <div class="back-top"> <div > <img src="imgsrc" class="line" :class="isHide? 'isHide': 'isShow'" :style="{display: (firstShow? 'block': 'none')}" @click="backTop"> </div> </div></template><script>export default { name: "backTop", data(){ return { firstShow: false,//初始化隱藏組件 isHide: false, scrollFLag: true, } }, created() { document.addEventListener('scroll', () => { let scroll = document.documentElement.scrollTop if(scroll > 200){ this.isHide = false this.firstShow = true }else{ this.isHide = true } }) }, methods: { backTop(){ if(this.scrollFLag){ this.scrollFLag = false //屏幕高度 let scroll = document.documentElement.scrollTop let scrollTimer = setInterval(()=> { scroll -= 50 document.documentElement.scrollTop = Math.max(scroll, 0) if( scroll <= 0){ clearInterval(scrollTimer) } }, 10) this.scrollFLag = true } }, },}</script><style scoped lang="scss">.back-top{ position: fixed; top: 0; right: 10vw; width: 20px; height: 500px; z-index: 200; .line{ width: 12vw; height: 100%; z-index: 20; cursor: pointer; opacity: 0.8; transform: translateY(-100%); &:hover{ opacity: 1; } } .isShow{ animation: back-top-move 0.5s forwards linear, back-top-yurayura 2s 0.6s forwards linear infinite; } .isHide{ animation: back-top-hide 0.5s forwards linear; }}@keyframes back-top-hide { from { transform: translateY(0); } to { transform: translateY(-100%); }}@keyframes back-top-move { to { transform: translateY(0); }}@keyframes back-top-yurayura { 0%{transform-origin: top center;transform: rotate(0)} 25%{transform-origin: top center;transform: rotate(2deg)} 75%{transform-origin: top center;transform: rotate(-2deg)} 100%{transform-origin: top center;transform: rotate(0)}}</style> |
到此這篇關于vue backtop組件的實現完整代碼的文章就介紹到這了,更多相關vue backtop組件內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/qq_38292936/article/details/115435384
