はじめに

Vue.jsでページ内スクロールやTOPへ戻るボタンを実装したらとても簡単だったのでそのやり方のメモです。
脱jqueryを考えている方に参考にしてもらえたら幸いです。

ページ内スクロールの実装

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script>

まず上記のCDNをHTMLファイルに読み込ませます。
Vue.jsのバージョンは必要に応じて変えてください。

<body>
  <div id="app">
  <!--  この中に実際のHTMLコードを記述する -->
  </div>
</body>

次にbodyタグの1つ内側にdivタグを記述し、id="app"を指定します。

<script>
    new Vue({
      el: '#app'
    });
</script>

そして、上記のコードをbodyの最後(id="app"が指定されているdivタグの外側)、または別のJSファイルに記述します。
Vue.jsの基本コードです。

<a href="#" v-scroll-to="'#contact'" >Contact</a>

最後にaタグに上記のように記述するだけです。
これだけでページ内スクロールが実装できます。
上記のコードでは、このaタグをクリックすることで、id="contact"が指定されているタグまでスクロールしてくれます。

TOPへ戻るボタンの実装

TOPへ戻るボタンが途中から出現する機能を実装します。

<script>
    new Vue({
      el: '#app',
      data: {
        visible: false,
      },
      created: function() {
        window.addEventListener("scroll", this.handleScroll);
      },
      methods: {
        handleScroll() {
          this.scrollY = window.scrollY;
          if (!this.visible) {
            this.visible = window.scrollY > 200;
          } else if (window.scrollY < 190) {
            this.visible = !this.visible;
          }
        }
      }
    });
</script>

先ほどのVueのコードに、data、created、methodsを追記します。
methodsの中の数値を変えるだけで、TOPへ戻るボタンの出現タイミングが変わります。

<a href="#" v-scroll-to="'#app'">
    <button class="return-top-button" v-show="visible">
      TOPへ戻る
    </button>
</a>

あとはボタンを作って、v-showを記述するだけです。

【超簡単】Vue.jsでページ内スクロールとTOPへ戻るボタンを実装

はじめに

ページ内スクロールの実装

TOPへ戻るボタンの実装