Vue.jsでトップへ戻るボタンを作る方法【window.scrollTo】

Vue.jsでトップへ戻るボタンを作る方法【window.scrollTo】

こんにちは。

ゆうや(@yuyaphotograph)です!

本記事では、Vue.jsでトップへ戻るボタンを作る方法をご紹介します。

ちなみにjQueryでは以下のようにスクリプトを書きます(^o^)

↓↓↓

index.js
$('.JS_ScrollTopBtn').on('click', function(){
    $('html, body').animate({
      scrollTop: 0
    },500);
});

Vue.jsではどんな書き方をするんでしょうか。

それでは見いていきましょう!

Vue.jsでトップへ戻るボタンを作ろう!

完成イメージ

今回実装するトップへ戻るボタンのイメージを共有いたします!

こんな感じです。

↓↓↓

Vueで作るトップへ戻るボタン

右下のボタンをクリックすると、一番上へヌルっと戻っていきます

Vue.jsで作るトップへ戻るボタン

今回のスクリプトのポイントはたったこれだけです!

↓↓↓

window.scrollToメソッドを使用する。

上記メソッドを駆使してVueのスクリプトはこんな感じで書きます!

↓↓↓

index.html
new Vue({
  el: '#app',
  methods: {
    scrollTop: function(){
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    }
  }
})

behavior」はアニメーションの速度の設定でsmooth・instant・autoの3つのうちいずれかを指定しましょう。

初期値はautoです(^o^)

smoothは「ヌルっと移動」。instantは「ヒュンと移動」です。


■トップへ戻るボタンのスタイル

トップへ戻るボタンは、position:fixedやright、bottom属性を駆使してページ右下に固定しています。

下矢印のアイコンは、FontAwesomeアイコンを使用しています。

その他ボタンのサイズなどはよしなに!

index.css
.Page-Btn{
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  background: #5bc8ac;
}

以下、CodePenのサンプルですのでご覧になって下さいまし(^o^)

See the Pen
WNbEBpx
by 石森裕也 (@yuyaphotograph)
on CodePen.

参考記事

参考 window.scrollToWeb API | MDN

まとめ

以上、Vue.jsでトップへ戻るボタンを作る方法をご紹介しました。

実務(Webサイト制作)でいつも使用しているパーツを徐々にVue.jsで作れるようになっていきたいなと思う今日このごろです笑

ボタンコーディング記事まとめ【HTML・CSS・jQuery】ボタンコーディングサンプルコード記事まとめ【HTML・CSS・jQuery】

Vue.jsの記事一覧ページ