# vuejs back to top button component 作成
トップに戻るボタンを軽く作ります。ライブラリー使わずに、back to top ボタンを実現します。
components/BackToTop.vue
<template>
<div>
<transition name="back-to-top-fade">
<slot>
<button
v-show="display"
type="button"
class="btn btn-info back-to-top"
:title="alt"
:style="{ ...btnStyle, bottom: bottom + 'px', right: right + 'px' }"
@click="toTop()"
>
<i class="fa fa-chevron-up"></i>
</button>
</slot>
</transition>
</div>
</template>
<script>
export default {
props: {
offsetTop: {
type: Number,
default: 100,
},
alt: {
type: String,
default: "Back to top",
},
bottom: {
type: Number,
default: 20,
},
right: {
type: Number,
default: 20,
},
btnStyle: {
type: Object,
default: {},
},
},
mounted() {
window.addEventListener("scroll", this.handleScroll);
},
data() {
return {
scrollY: 0,
};
},
computed: {
display() {
return this.scrollY && scrollY > this.offsetTop;
},
},
methods: {
handleScroll() {
setTimeout(() => {
this.scrollY = window.scrollY;
}, 100);
},
toTop() {
window.scrollTo({
top: 0,
behavior: "smooth",
});
},
},
};
</script>
<style scoped>
.back-to-top {
position: fixed;
width: 50px;
height: 50px;
padding: 10px;
border-radius: 50%;
z-index: 9;
opacity: 0.8;
}
.back-to-top-fade-enter-active,
.back-to-top-fade-leave-active {
transition: opacity 0.7s;
}
.back-to-top-fade-enter,
.back-to-top-fade-leave-to {
opacity: 0;
}
</style>
やっていること
- ページロードしたら scroll イベントを監視
window.addEventListener("scroll", this.handleScroll); - スクロール値が指定値超えるとボタン表示
display() {return this.scrollY && scrollY > this.offsetTop;} - トップへ戻るボタン押されたらトップにスクロール
toTop()
構造はシンプルでかんたん
# Props Options
| Props | Type | Default | Memo |
|---|---|---|---|
| offsetTop | Number | 100 px | トップに戻るボタン表示するタイミング |
| alt | String | Back to top | トップに戻るボタンに hover した時の表示 |
| bottom | Number | 20 px | ボタンが下からの表示距離 |
| right | Number | 20 px | ボタンが右からの表示距離 |
| btnStyle | Object | {} | ボタンに反映するスタイルシート |