くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Nuxt.js > Nuxt/Vueでスクロールするならvue-scrolltoが便利

Nuxt/Vueでスクロールするならvue-scrolltoが便利

Nuxt.js Vue.js

トップに戻るとか、ページ内リンクで移動するとかしたいなと思ったときの備忘録。
vue-scrollto便利！

トップボタンをつける話はこちら〜

www.memory-lovers.blog

準備する

インストール

$ npm install --save vue-scrollto

プラグインを用意

plugins/vue-scrollto.tsを用意する

import Vue from "vue";
import VueScrollTo from "vue-scrollto";

Vue.use(VueScrollTo, {
  // デフォルトのオプションとかはここで設定
  offset: -100 // ヘッダ分を考慮
});

export default function(ctx, inject) {
  inject("scrollTo", VueScrollTo.scrollTo);
}

nuxt.config.jsの設定

作ったpluginを追加する

const config: NuxtConfiguration = {
  plugins: [
    { src: "~/plugins/vue-scrollto", ssr: false },
  ],
}

使ってみる

使い方は簡単！ v-scroll-toでDOM要素を指定するだけ!

トップに戻る

こんな感じで、<body>に移動すればOK

<a v-scroll-to="'body'"></a>

nuxt-linkを使う場合はこんな感じ。toが必要。

<nuxt-link v-scroll-to="'body'" to></nuxt-link>

任意の場所に移動

こんな感じで移動先にidを指定しておいて、#idを指定すればOK

<h3 id="sec1"></h3>

<!-- 略 -->

<a v-scroll-to="'#sec1'"></a>
<nuxt-link v-scroll-to="'#sec1'" to></nuxt-link>

以上!!

おすすめの本

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

改訂新版　Vue.jsとFirebaseで作るミニWebサービス (技術の泉シリーズ（NextPublishing）)

改訂新版　Vue.jsとFirebaseで作るミニWebサービス (技術の泉シリーズ（NextPublishing）)

参考にしたサイト様