1 | <template>
|
2 | <transition name="fade">
|
3 | <svg
|
4 | v-if="show"
|
5 | class="go-to-top"
|
6 | @click="scrollToTop"
|
7 | xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.484 28.284"
|
8 | >
|
9 | <g transform="translate(-229 -126.358)">
|
10 | <rect fill="currentColor" width="35" height="5" rx="2" transform="translate(229 151.107) rotate(-45)"/>
|
11 | <rect fill="currentColor" width="35" height="5" rx="2" transform="translate(274.949 154.642) rotate(-135)"/>
|
12 | </g>
|
13 | </svg>
|
14 | </transition>
|
15 | </template>
|
16 |
|
17 | <script>
|
18 | import debounce from 'lodash.debounce'
|
19 |
|
20 | export default {
|
21 | props: {
|
22 | threshold: {
|
23 | type: Number,
|
24 | default: 300
|
25 | }
|
26 | },
|
27 |
|
28 | data () {
|
29 | return {
|
30 | scrollTop: null
|
31 | }
|
32 | },
|
33 |
|
34 | mounted () {
|
35 | this.scrollTop = this.getScrollTop()
|
36 | window.addEventListener('scroll', debounce(() => {
|
37 | this.scrollTop = this.getScrollTop()
|
38 | }, 100))
|
39 | },
|
40 |
|
41 | methods: {
|
42 | getScrollTop () {
|
43 | return window.pageYOffset
|
44 | || document.documentElement.scrollTop
|
45 | || document.body.scrollTop || 0
|
46 | },
|
47 |
|
48 | scrollToTop () {
|
49 | window.scrollTo({ top: 0, behavior: 'smooth' })
|
50 | this.scrollTop = 0
|
51 | }
|
52 | },
|
53 |
|
54 | computed: {
|
55 | show () {
|
56 | return this.scrollTop > this.threshold
|
57 | }
|
58 | }
|
59 | }
|
60 | </script>
|
61 |
|
62 | <style lang='stylus' scoped>
|
63 | .go-to-top {
|
64 | cursor: pointer;
|
65 | position: fixed;
|
66 | bottom: 2rem;
|
67 | right: 2.5rem;
|
68 | width: 2rem;
|
69 | color: $accentColor;
|
70 | z-index: 1;
|
71 | }
|
72 |
|
73 | .go-to-top:hover {
|
74 | color: lighten($accentColor, 30%);
|
75 | }
|
76 |
|
77 | @media (max-width: 959px) {
|
78 | .go-to-top {
|
79 | display: none;
|
80 | }
|
81 | }
|
82 |
|
83 | .fade-enter-active, .fade-leave-active {
|
84 | transition: opacity 0.3s;
|
85 | }
|
86 |
|
87 | .fade-enter, .fade-leave-to {
|
88 | opacity: 0;
|
89 | }
|
90 | </style>
|