初心者向け。Vue.jsでトップに戻るボタン（スムーススクロール）の実装方法
1713 回閲覧されました
Vue.jsでトップに戻るボタンの実装の解説をします。
ライブラリもありますがライブラリは関係ない物まで読み込んでページの表示に影響するかもしれないので自作で実装します。
デモは↓です。
完成形のコードは↓になります。
コードの解説をします。
画面をある程度スクロールするまでトップに戻るボタンを表示したくないのでv-showディレクティブを使います、6行目から10行目です。
8行目の300がスクロールする量です。
そしてボタンをクリックするとトップに戻るようにしたいのでv-onディレクティブを入れています。（9行目です）
22行目のスクロールイベントをする際にライフサイクルフックを使いますがmountedかcreatedとdestroyがありdestroyはDOMがなくなった後なので使わずmountedかcreatedのどちらかになります。
mountedかcreatedかは何をするかで使い分けますが画面をある程度スクロールした場合に使うだけならどちらでも動きます。（createdでも試したら動きました）
26行目から35行目までは私はよく分からないのでおまじないみたいな物と思ってつけています。
36行目から41行目までがトップに戻るための記述です。
38行目で画面の一番上まで戻って39行目でスムーススクロールになってするっと動きます。
これで完成です。
ボタンをクリックしたら所定の場所に移動（スムーススクロール）する方法
ネットを見るとライブラリで実装していますが簡単に実装できます。
デモは↓です。
完成形のコードは↓です。
コードの解説をします。
画面をスクロールすると現われるトップに戻るボタンのように途中から現れる必要はないので最初から 表示するためトップに戻るボタンのコードの8行目（v-showタグ）を取ります。
またトップに戻るボタンのコードの38行目の数値を2000にします。
値はどこに移動させたいかで変わります、私はデモの「ここに飛ぶ」まで移動させたくて2000にしていますが値は実際に移動させて決めないといけません。
これで完成ですがスムーススクロールは移動する量を目分量で探さないといけなくそれが大変なのでライブラリを使う人が多いのかもしれません。