# たかがスムーススクロールライブラリ、されどスムーススクロールライブラリ デモ: https://hungry-hoover-2ab08b.netlify.com/ ### スムーススクロールライブラリ - vue-scrollto - Vue/Nuxt でよく使われている https://github.com/rigor789/vue-scrollto - Smooth Scroll - いわゆるサイト制作でよく使われている (フレームワーク不問) https://github.com/cferdinandi/smooth-scroll --- ### vue-scrollto の使い方 ``` bash $ yarn add vue-scrollto ``` ``` javascript // nuxt.config.js // ... modules: ['vue-scrollto/nuxt'], // ... ``` ``` html <a v-scroll-to="'body'" href="#">BACK TO TOP</a> ``` ### Smooth Scroll の使い方 ``` bash $ yarn add smooth-scroll ``` ``` javascript // nuxt.config.js // ... // 2.4 より前の書き方。3 からは非推奨になる。 // plugins: [{ src: '~/plugins/smooth-scroll.client', ssr: false }], plugins: [{ src: '~/plugins/smooth-scroll.client', mode: 'client' }], // ... ``` ``` javascript // pages/index.vue // ... mounted() { this.$SmoothScroll('a[href="#top"]') } // ... ``` ``` javascript // plugins/smooth-scroll.client.js import SmoothScroll from 'smooth-scroll' export default (ctx, inject) => { inject('SmoothScroll', SmoothScroll) } ``` ``` html <a href="#top">BACK TO TOP</a> ``` > メモ: href="#top" または空のフラグメント href="#" を現在のページの最上部へのリンクとして使用できます。この動作は HTML 仕様書で定義されています。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/a ### Smooth Scroll の利点 - フォーカス管理 - 固定ヘッダーを考慮したスクロール位置の調節 - URL フラグメント (ハッシュ) の更新 (戻る/進むが使える)