Vue.jsでクリックするとトップに戻るボタンを自作する方法
1475 回閲覧されました
みなさんこんにちは、jonioです。
今回はボタンが最初非表示になっていて画面をスクロールすると表示されてそれをクリックすると画面の一番上に戻るボタンを自作する方法の解説をします。
デモ
デモは↓です、画面トップに戻るボタンがいきなり表示されますが実際はある程度スクロールして表示されてスクロール量の調節もできます。
ファイルの用意
トップに戻るボタンを実装するファイルを用意します。（index.vueとします）
7行目に「ここに画面に表示する内容を入れる」と記載していますが内容を入れないと画面をスクロールすることができなくてトップに戻るボタンが表示されないので必ず内容を入れて下さい。
トップに戻るボタンは最初非表示にしていますがそうするためのフラグを用意します。
トップに戻るボタンを非表示にする
index.vueのコードを↓にします。
表示・非表示のフラグを5行目で「buttonActive」と設定して最初非表示にする為に22行目でfalseにしています。
次は画面を一定量スクロールした時に22行目のfalseをtrueに変える設定をします。
falseをtrueに変える設定
コードを↓にします。
スクロールした時にトップに戻るボタンを表示するためのスクロール量を32行目で設定しています。
今は「700」と記載されているので700pxです、これは自分でお好みに設定してください。
33行目の「window.scrollY」は画面のスクロール量です。
34行目〜39行目はスクロール量が700を超えたらトップに戻るボタンを表示して700を超えてない時はトップに戻るボタンを表示しないための記述です。
これでスクロールしたらトップに戻るボタンは表示される様になりますがトップに戻る為の記述がまだないのでそれを実装します。
トップに戻るための記述
index.vueのコードを↓にします。
トップに戻るボタンをクリックした時を考えるので6行目でv-onディレクティブを追加しています。
「pageTop」の中身を33行目〜38行目で設定していますがこれでトップにするーっと戻ることができる様になります。
これで完成です。