小樽で活動しているフリーのフロントエンドエンジニアです。

Vue.jsで作るスクロールトップ

2019-02-17

Vue.jsで作るページスクロール(上へ戻るボタン)

jQueryで作れるものをVue.jsで作ろうシリーズ。
第2弾はページの特定要素にジャンプするボタンと右下によくある上へ戻るボタンです。

要件

・ボタンをクリックしたら特定要素に飛ぶ
・戻るボタンをクリックしたら一番上へ戻る
・jQueryのanimateを使うのはNG
・Vueのライブラリを使わない
(Vueにもいろいろライブラリがありますがあえて生のjsで)

See the Pen Vueスクロール by Saito Keita (@saito-keita) on CodePen.0

解説

「ミドルエリアへ戻る」ボタンを押すと、ミドルエリア最上部へ戻ります。
これはv-on:clickでpMiddleメソッドを呼び出しています。
pMiddleメソッドはVueより生のjsを使っている部分が多いです。
スムーススクロールはbehaviorを使用しています。

「トップへ戻る」ボタンを押すと
0の位置まで戻る仕組みです。

振り返って

色々調べましたが、今回はVue独自のものを使うというより生のjsを使うことが多かったので、
jsの勉強にもなりました。次回以降はVue独自のものを使えるように努力していきたいです。

Share Button