WebDesign Dackel

Zeptoにも対応、スムーズスクロール用jQueryプラグイン「jquery.sweet-scroll.js」を書いた

Zeptoにも対応、スムーズスクロール用jQueryプラグイン「jquery.sweet-scroll.js」を書いた

Hatena0
Google+0
Pocket0
Feedly0

世の中にある多くのWebサイトで見かける「スムーズスクロール」ですが、なかなか「これだ!」というプラグインが無かったので自作してみました。

プラグインを作った経緯

この手のプラグインは既に沢山リリースされているため、どれを使うか選び放題です。
ただ、使ってみると動的に追加した要素に対して有効じゃなかったり、一時的に動作を止めたり、ちょっと複雑に使おうとするとなんだかなぁ〜というのがあったので自分で作ってみることにしました。

また、最近はスマホサイトでjQueryではなくZeptoを導入するケースがあるので、さりげなくZeptoにも対応してみました。
どちらでも同じプラグインを共有出来るのがメリットかなぁと思います。

デモページ

jQuery SweetScroll

jQuery SweetScroll

SweetScrollの特徴

  • ZeptojQueryのどちらでも使える
  • 縦横のスクロールに対応
  • 任意のタイミングでアニメーション可能
  • ページの初期表示でハッシュの位置にスクロールできる
  • data属性を使ってパラメータを指定できる
  • 一時的に無効化/有効化できる
  • velocityがインストールされている場合は、アニメーションにvelocityを使う
  • スクロール中にマウスホイールを動かすとアニメーションを止める

最近お気に入りだったvelocity.jsを使ったアニメーションにも対応しています。気持ち程度にスクロールがスムーズになるかと思います。
ちなみvelocity.jsはにQiitaの下記エントリで初めて知りました。

JavaScript – アニメーション最強のVelocity.jsの使い方 – Qiita

使い方

デモページDownloadボタンからファイルをダウンロードしておきます。

ダウンロードしたファイルをHTMLに読み込んで、任意の要素にsweetScroll()を実行します。

<script src="jquery.sweet-scroll.min.js"></script>
<script>
$(function(){
  $("a[href^='#']").sweetScroll();
});
</script>

基本的にはこれだけで、href属性が#で始まるリンクに対してプラグインが有効になります。

指定できるオプション

指定できるオプションとそのデフォルト値の一覧です。

$("a[href^='#']").sweetScroll({
  duration: 1200,           //"auto"かアニメーション速度(ms)
  delay: 0,                 //アニメーション開始の遅延時間
  easing: "easeOutQuint",   //イージング
  target: null,             //スクロールの目的をidで指定できます ("#header"みたいな)
  to: null,                 //スクロールさせる位置を座標で指定
  offset: 0,                //スクロール後の座標を調整できます
  autoCoefficient: 2,       //アニメーション速度を自動で計算する際の係数 (duration:"auto"の時に使います)
  stopScroll: true,         //スクロールの途中でホイールや画面をタッチした際にキャンセルさせるか
  changeHash: false,        //スクロールが完了した時にURLハッシュを変更するか
  verticalScroll: true,     //trueで縦スクロールを有効
  horizontalScroll: false,  //trueで横スクロールを有効
  loadedScroll: false,      //trueでページ読み込み時にURLハッシュの位置にスクロールします
  loadedScrollQuery: false, //trueでハッシュの代わりにクエリを使ってスクロールさせます
  stopPropagation: true,    //親要素へのイベントのバブリングを制御します
  useVelocity: true,        //trueでvelocityが使える場合は積極的にvelocityを使います(よりスムーズに!)

  // Callbacks
  beforeScroll: null,       //スクロールが始まる前に実行 (return falseすることで動作をキャンセルします)
  afterScroll: null,        //スクロールが完了した時に実行
  cancelScroll: null        //スクロールがキャンセルされた時に実行
});

ダウンロード

デモページGithubからダウンロード出来ます。

また、今のところnpmbowerにも登録していますので、それぞれ下記でインストールできます。

npmの場合

$ npm install jquery-sweet-scroll

bowerの場合

$ bower install jquery-sweet-scroll

まとめ

あと他にも使える機能があったり、実装についてなど書いておきたいことがあるのですが、それはまた今度書こうと思います。
とりあえず作り終わったのでご紹介ということで…。