MD-Blog_Web Creative

最近、MONSTER DIVE社内の勉強会でクリエイターのMZKさんから、

「ハッシュ付きのURLにアクセスした時、
  fixedされたヘッダーがあると、要素に被ってしまう問題を
  簡単に解決したい！」

と要望があったので、勉強がてらjQueryプラグインを作ってみました。

jQueryプラグインの作り方

(function ($) {
    $.fn.pluginName = function (options) {
        // ここに処理を書く
        return this; // チェーンメソッドを利用する為自身を返す
    };
})(jQuery);

簡単ですね。

使い方

では、早速このプラグインの使い方を解説します。

$('html,body').initScroll();

これだけ!

ただ、これだとハッシュが付いた要素までスクロールするだけで、"fixedされたヘッダーが被ってしまう問題"は解決出来ません。

そこで、オプションを指定します。

$('html,body').initScroll({
    offsetObject: $('#header')
});

offsetObjectにfixedされたヘッダーを指定してあげます。
これでfixedされたヘッダーが被らなくなります。

オプション一覧

この他にもいくつかオプションを用意しました。

options.offset

本来のスクロール位置から移動させる

• 型：number
• 初期値：0

options.offsetObject

指定したオブジェクトの位置と高さ分、本来のスクロール位置から移動させる

• 型：jQueryオブジェクト
• 初期値：null

options.duration

スクロール時間(ミリ秒)

• 型：number
• 初期値: 600

options.easing

イージングの種類

• 型：string
• 初期値： swing

※jQuery単体では「linear」と「swing」の2種類だけなので、別途「jQuery Easing Plugin」等を使用するか、velocity.jsを使用します。

options.velocity

velocity.jsを使用するかどうか

• 型：Boolean
• 初期値：false

※別途velocity.jsの読み込みが必要。

DEMO

• https://www.monster-dive.com/blog/_sample/160806/#b
• https://www.monster-dive.com/blog/_sample/160806/#c
• https://www.monster-dive.com/blog/_sample/160806/#d
• https://www.monster-dive.com/blog/_sample/160806/#e

ダウンロード

• jquery.initscroll.js
• jquery.initscroll.min.js（minify版）

まとめ

思ったよりも簡単にプラグインを作れたので、これからも作業効率が上がるようなプラグインを作っていきたいですね。

作業効率を良くして早く帰りましょう!!（切実）