脱 jQuery!軽量のスクロール JS・MoveTo が便利Front End Programming

脱 jQuery!軽量のスクロール JS・MoveTo が便利

JS Gulp

みなさん、スムーズスクロールは好きですか?最近 jQueryなしで使える jsライブラリの MoveTo がお気に入りです。ということで、今日はMoveTo の使い方をご紹介します。

GitHub でソースを拾ってこよう

以下サイトよりダウンロードします。
Clone or download をクリック後、Download ZIPでおっけーです。

https://github.com/hsnaydd/moveTo

dist/内に moveTo.js と moveTo.min.js がありますので、後者のミニファイ(圧縮)されたファイルの方を使いましょう。

ページ内リンクをスムーズスクロール設定する

初期値は以下の通りです。

const moveto = new MoveTo({
  tolerance: 0,
  duration: 800,
  easing: 'easeOutQuart'
})

tolerance

スクロール到達地点の許容誤差を補正。初期値は「0」。ヘッダー固定などしているときは少し調整すると良い。

duration

移動時間をミリ秒単位で指定できる。初期値は「800」。

easing

スクロールのイージング描画の種類を指定します。初期値は「easeOutQuart」。

callback

スクロール終了時に実行される処理を指定可能。

初期値のままで使いたい場合は、以下のように指定します。

const moveto = new MoveTo()

スクロール終了時に何かしら処理を加えることもできます。コールバックを指定したいときはこんな感じで書けばおっけー。

const moveto = new MoveTo({
  callback: function () {
    alert('スクロールしたよ!')
  }
})

個別に設定する

class を js-trigger に設定するとスクロールの対象になります。
ターゲットの設定は aタグであれば href属性にまんま書いてもいいし、ボタンタグなどであればカスタム属性 data-taget の値に指定します。

<a class="js-trigger" data-mt-duration="300" href="#target">Trigger</a>
<button class="js-trigger" data-mt-duration="300" data-target="#target" type="button">Trigger</button>

まとめて設定する

#から始まる href の値が指定してあるaタグのみスムーズスクロールできるようにします。
ちなみに href は hypertext reference の略です。
href^=で値が#から始まる aタグのみを配列化できます。

forEach()を使って一気に指定することも可能です。モダンブラウザであれば、Array.prototype.slice.callの指定は必要ありませんが、IE11では動きません!IE対策のために一行追加しましょう。

moveto.registerTrigger()で何をクリックしたら、moveTo が動くかを設定してやります。

let anchorTags = document.querySelectorAll('a[href^="#"]')
anchorTags = Array.prototype.slice.call(anchorTags, 0)//IE対策
anchorTags.forEach((value) => {
  moveto.registerTrigger(value)
})

webpack から追加してみる

せっかくなので webpack で js もワンソース化しましょう。私は gulp と webpack 使ってます。npm install で追加してます。

webpack が入っていない人は入れてください。後日 webpack の導入の仕方は別に記事書きます。

コマンド

$ npm install webpack webpack-stream -D

moveTo をインストールします。

コマンド

$ npm install moveto -D

最新の webpack の場合

最新の webpack (4系)であれば webpack 無駄に指示を書く必要はありません。
import で呼び出せます。なんて楽ちん。

JS

import MoveTo from 'moveto'
const moveto = new MoveTo()
let anchorTags = document.querySelectorAll('a[href^="#"]')
anchorTags = Array.prototype.slice.call(anchorTags, 0)//IE対策
anchorTags.forEach( (value) => {
  moveto.registerTrigger(value)
})

古いやり方

古いやつだと webpack に以下を記述します。

webpack

externals: {
  MoveTo: 'MoveTo',
},
resolve: {
  alias: {
    'MoveTo': 'moveto/dist/moveTo.min.js',
  }
}

JSにはこんな感じで MoveTo を読み込みます。

JS

const MoveTo = require('moveTo')
window.MoveTo = MoveToconst moveto = new MoveTo()
let anchorTags = document.querySelectorAll('a[href^="#"]')
anchorTags = Array.prototype.slice.call(anchorTags, 0)//IE対策
anchorTags.forEach((value) => {
  moveto.registerTrigger(value)
})

まとめ

いかがでしたか?
jQueryなしでわりかし簡単に設定できるしとにかく軽いのは嬉しいです。ぜひ使ってみてください。

追記 : 12/14に指摘を受け、記事を修正・追記いたしました。

関連記事もあわせてお読みください

Read More Blogs

Web制作に関する人気の記事

セブ島・海外移住に関する人気の記事

キャリアアップ・ライフスタイルに関する人気の記事

管理人について

IT戦士:かみーゆ

私、フロントエンドエンジニアのかみーゆです。日本でフロントエンドを中心に約10年Web制作 →→→ セブ島に転職してエンジニア講師 →→→ オフショア開発担当者(イマココ)。13歳の頃から「好きなように生きて好きなように死ぬ」が人生のKPI。なので、「楽しいか」、「かっこいいか」でやることを判断・取捨択一しています。好きなものは肉とビール。

About Me