本文へジャンプ

jQueryプラグイン作ってみた ~jQuery.initScroll.js~

Posted by Satoshi Ohki

最近、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

ダウンロード

まとめ

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

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

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
2018年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+ Tumblr