<template>
	<a @click="scrollTop" v-show="visible" class="scroll-to-top bottom-right">
		<slot><span class="btn btn-light p-1 px-2"><i class="fas fa-lg fa-angle-up"></i></span></slot>
	</a>
</template>

<script>
export default {
	data() {
		return {
			visible: false,
		};
	},
	methods: {
		scrollTop: function () {
			window.scrollTo(0,0);
		},
		scrollListener: function (e) {
			this.visible = window.scrollY > 150;
		},
	},
	mounted: function () {
		window.addEventListener("scroll", this.scrollListener);
	},
	beforeUnmount: function () {
		window.removeEventListener("scroll", this.scrollListener);
	},
};
</script>

<style scoped>
.bottom-right {
	position: fixed;
	bottom: 15px;
	right: 10px;
	cursor: pointer;
	z-index: 8;
}
</style>