PlacedTop.vue
2.95 KB
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
//置顶
<template>
<div class="all" v-show="showIcon">
<i class="icon-huidaodingbu" @click="backTop"></i>
</div>
</template>
<script>
// import smoothscroll from 'smoothscroll-polyfill'
export default {
name: 'PlacedTop',
props: {
containerId: {
type: String,
default: '',
},
nodeId: {
type: String,
default: '',
},
classNodeId: {
type: String,
default: '',
},
},
data() {
return {
showIcon: false,
scrollTop: null,
}
},
mounted() {
// 解决移动端 scrollTo 的 behavior: "smooth" 无效的问题
// smoothscroll.polyfill()
window.addEventListener('scroll', this.scrollBackTop, true) //监听滚动条
},
methods: {
backTop() {
setTimeout(() => {
if (this.containerId) {
document.getElementById('workerContent').scrollTo({
top: 0,
behavior: 'smooth',
})
} else if (this.nodeId) {
document.getElementById(this.nodeId).scrollTo({
top: 0,
behavior: 'smooth',
})
} else if (this.classNodeId) {
document.getElementsByClassName(this.classNodeId)[0].scrollTo({
top: 0,
behavior: 'smooth',
})
} else {
this.$parent.$el.scrollTo({
top: 0,
behavior: 'smooth',
})
}
}, 0)
this.showIcon = false
},
// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
scrollBackTop() {
const that = this
let scrollTop = this.$parent.$el.scrollTop
//
if (this.containerId) {
scrollTop = document.getElementById('workerContent').scrollTop
}
// id
if (this.nodeId) {
scrollTop = document.getElementById(this.nodeId)
? document.getElementById(this.nodeId).scrollTop
: 0
}
// class
if (this.classNodeId) {
scrollTop = document.getElementsByClassName(this.classNodeId)[0]
? document.getElementsByClassName(this.classNodeId)[0].scrollTop
: 0
}
that.scrollTop = scrollTop
if (that.scrollTop > 400) {
that.showIcon = true
} else {
that.showIcon = false
}
},
},
//移除滚动条监听
beforeDestroy() {
window.removeEventListener('scroll', this.scrollBackTop, true)
},
}
</script>
<style lang="scss" scoped>
.all {
position: fixed;
bottom: 15vh;
right: 8px;
z-index: 99;
width: 36px;
height: 36px;
background: #ffffff;
box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
i {
font-size: 24px;
color: #409eff;
}
}
</style>