サンプルデモ
See the Pen WaLmqj by Masaki Oba (@Cleysense) on CodePen.
実装方法
vue-smooth-scrollのインストール
プロジェクトディレクトリにvue-smooth-scrollをインストール
cd *** // プロジェクトのディレクトリに移動 npm i -D vue-smooth-scroll
jsファイルにプラグインの使用を宣言
import vueSmoothScroll from 'vue-smooth-scroll' Vue.use(vueSmoothScroll);
HTMLソースコード
ここまでの作業でスムーススクロールの実装ができます。
簡単ですね。
<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-smooth-scroll="{ duration: 1000, offset: -50 }">セクション1</a>
</li>
</ul>
<div id="section1">
<!-- セクション1のコンテンツ -->
</div>
使い方は簡単で、v-smooth-scrollにdurationとoffsetのオプションを追加するだけです。
durationがアニメーションスピード、offsetがスクロール位置となっていて、offsetでは正・負どちらの数値も反映されます。
上記例では、指定したセクションコンテンツより50px上の位置で止まる設定となります。
スクロールイベントの実装
スクロール後にトップへ戻るボタンを表示させるため、カスタムスクロールディレクティブでスクロールイベントを実装します。
カスタムスクロールディレクティブとVueインスタンスのサンプルです。
// 必ず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>