【超簡単】Vue.jsでページ内スクロールとTOPへ戻るボタンを実装
はじめに
Vue.jsでページ内スクロールやTOPへ戻るボタンを実装したらとても簡単だったのでそのやり方のメモです。
脱jqueryを考えている方に参考にしてもらえたら幸いです。
ページ内スクロールの実装
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script>
まず上記のCDNをHTMLファイルに読み込ませます。
Vue.jsのバージョンは必要に応じて変えてください。
<body>
<div id="app">
<!-- この中に実際のHTMLコードを記述する -->
</div>
</body>
次にbodyタグの1つ内側にdivタグを記述し、id="app"を指定します。
<script>
new Vue({
el: '#app'
});
</script>
そして、上記のコードをbodyの最後(id="app"が指定されているdivタグの外側)、または別のJSファイルに記述します。
Vue.jsの基本コードです。
<a href="#" v-scroll-to="'#contact'" >Contact</a>
最後にaタグに上記のように記述するだけです。
これだけでページ内スクロールが実装できます。
上記のコードでは、このaタグをクリックすることで、id="contact"が指定されているタグまでスクロールしてくれます。
TOPへ戻るボタンの実装
TOPへ戻るボタンが途中から出現する機能を実装します。
<script>
new Vue({
el: '#app',
data: {
visible: false,
},
created: function() {
window.addEventListener("scroll", this.handleScroll);
},
methods: {
handleScroll() {
this.scrollY = window.scrollY;
if (!this.visible) {
this.visible = window.scrollY > 200;
} else if (window.scrollY < 190) {
this.visible = !this.visible;
}
}
}
});
</script>
先ほどのVueのコードに、data、created、methodsを追記します。
methodsの中の数値を変えるだけで、TOPへ戻るボタンの出現タイミングが変わります。
<a href="#" v-scroll-to="'#app'">
<button class="return-top-button" v-show="visible">
TOPへ戻る
</button>
</a>
あとはボタンを作って、v-showを記述するだけです。
Author And Source
この問題について(【超簡単】Vue.jsでページ内スクロールとTOPへ戻るボタンを実装), 我々は、より多くの情報をここで見つけました https://qiita.com/c-shiraga/items/0383c60560d02c1b48df著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .