今回はVue.jsでトップへ戻るボタンなどに使われるスムーススクロールを簡単に実装する方法を紹介します。
vue-smooth-scrollのインストール
プロジェクトのディレクトリにvue-smooth-scrollというプラグインをインストールします。
npm i -D vue-smooth-scroll
次にjsファイルにvue-smooth-scrollをインポートします。
import vueSmoothScroll from 'vue-smooth-scroll'
Vue.use(vueSmoothScroll);
HTML
スムーススクロールの機能がかりやすいように縦スクロールできるくらいの高さは用意しておきましょう。
リストになっている<a>は各セクションへ移動するためのリンクです。必要ならこのリンクにオプションをつけることができます。
<ul>
<li>
<a href="#section1" v-smooth-scroll>セクション1</a>
</li>
<li>
<a href="#section2" v-smooth-scroll>セクション2</a>
</li>
<li>
<a href="#section3" v-smooth-scroll>セクション3</a>
</li>
</ul>
<div id="section1">
<!-- セクション1のコンテンツ -->
</div>
<div id="section2">
<!-- セクション2のコンテンツ -->
</div>
<div id="section3">
<!-- セクション3のコンテンツ -->
</div>
オプションを設定
オプションを使うとスクロールの位置やアニメーションスピードを変更することができます。
例えば、position: fixedを使って固定している場合は以下のようなオプションを使って位置とスピードを変更できます。
<ul>
<li>
<a href="#section1" v-smoth-scroll="{ duration: 1000, offset: -50 }">セクション1</a>
</li>
</ul>
<div id="section1">
<!-- セクション1のコンテンツ -->
</div>
v-smooth-scrollにdurationとoffsetというオプションを追加しています。
durationがアニメーションスピード、offsetはスクロールの位置となっています。offsetにはマイナスを指定することもできます。
上記のコードの場合、1秒かけて指定した場所より50px上のいちにスクロールで移動することになります。
スクロールイベントを登録
スクロールイベントを登録するときはカスタムスクロールディレクティブを使います。
以下のコードのようになります。
// 必ずVueインスタンス作成前に登録する
Vue.directive('scroll', {
inserted: function (el, binding) {
let f = function (evt) {
if (binding.value(evt, el)) {
window.removeEventListener('scroll', f)
}
};
window.addEventListener('scroll', f)
}
});
// Vueインスタンス作成
const app = new Vue({
el: '#app',
data: {
visible: false // 表示・非表示判定を格納
},
methods: {
handleScroll() {
// スクロール値が151以上の場合にvisibleをtrue、そうでない場合にfalseにする
this.visible = window.pageYOffset > 150;
}
}
});
トップへ戻るボタンのHTMLは以下のような感じで大丈夫でしょう。
<body id="top">
<div v-scroll="handleScroll" :class="{visible: visible}">
<a href="#top" v-smooth-scroll>トップへ戻る</a>
</div>
</body>