<template>
|
<el-button
|
@click="topFunction"
|
id="topBtn"
|
:style="{display: buttonDisplay}"
|
>
|
<i class="icon-top"></i>
|
<div>Top</div>
|
</el-button>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component } from 'vue-property-decorator';
|
|
@Component
|
export default class UiGoToTop extends Vue {
|
buttonDisplay = 'none';
|
|
//////////////////////////////////////////////////////////////////
|
|
created() {
|
if (process.browser) {
|
document.body.addEventListener('scroll', this.scrollFunction);
|
}
|
}
|
|
destroyed() {
|
document.body.removeEventListener('scroll', this.scrollFunction);
|
}
|
|
//////////////////////////////////////////////////////////////////
|
|
scrollFunction() {
|
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
|
this.buttonDisplay = "block";
|
} else {
|
this.buttonDisplay = "none";
|
}
|
}
|
|
topFunction() {
|
document.body.scrollTop = 0;
|
document.documentElement.scrollTop = 0;
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
#topBtn {
|
display: none;
|
position: fixed;
|
bottom: 30px;
|
right: 20px;
|
z-index: 99;
|
background-color: #666666;
|
color: $PRIMARY_WHITE;
|
cursor: pointer;
|
width: 68px;
|
height: 68px;
|
border-radius: 50px;
|
border: none;
|
transition: width height;
|
transition-duration: 0.5s;
|
font-size: 16px;
|
|
&:hover,&:focus {
|
transform: scale(0.9);
|
transition: transform;
|
transition-duration: 0.5s;
|
background-color: $MID_GREY;
|
}
|
}
|
</style>
|
