photoprism/frontend/src/component/p-scroll-top.vue

52 lines
1.3 KiB
Vue
Raw Normal View History

2019-06-16 13:12:57 +00:00
<template>
<transition name="fade-transition">
<v-btn
color="accent darken-2"
2019-06-16 13:12:57 +00:00
dark
fab
fixed
right
top
@click.stop="scrollToTop"
2019-06-16 21:07:37 +00:00
v-if="show"
class="p-photo-scroll-top"
2019-06-16 13:12:57 +00:00
>
<v-icon>arrow_upward</v-icon>
</v-btn>
</transition>
</template>
<script>
export default {
name: 'p-scroll-top',
data() {
return {
2019-06-16 21:07:37 +00:00
show: false,
maxY: 0,
2019-06-16 13:12:57 +00:00
};
},
methods: {
onScroll: function () {
2019-06-16 21:07:37 +00:00
if(window.scrollY > this.maxY) {
this.maxY = window.scrollY;
this.show = false;
} else if (window.scrollY < 300) {
this.show = false;
this.maxY = 0;
} else if ((this.maxY - window.scrollY) > 75) {
this.show = true;
}
2019-06-16 13:12:57 +00:00
},
scrollToTop: function () {
return this.$vuetify.goTo(0);
},
},
created() {
window.addEventListener('scroll', this.onScroll);
},
destroyed() {
window.removeEventListener('scroll', this.onScroll);
}
};
</script>