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

2019/12/30

こんにちは。

ゆうや（@yuyaphotograph）です！

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

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

↓↓↓

index.js

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

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

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

完成イメージ
Vue.jsで作るトップへ戻るボタン
参考記事
まとめ

完成イメージ

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

こんな感じです。

↓↓↓

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

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.