Section Scroller

JavaScript

セクションごとに自動でスクロールしてくれるボタン実装「Section Scroller」

Section Scrollerは、セクションごとにスムーズにスクロールしてくれるボタンを実装することができるjQueryプラグインです。ボタンをクリックすることで、次のセクションの位置まで自動でスクロールしてくれるのでとても快適です。

Section Scroller

デモ

デモページでは、画面右下にスクロールボタンが設置されています。ここをクリックすると、次のセクションまで自動スクロールされます。自分でスクロールすると、中途半端な位置で止まってしまいですが、このボタンをクリックしていくことでセクションごとにキッチリ見ていくことが可能です。

セクションごとに分割されたWebページにはとても役立つ機能になるのではないでしょうか?

HTMLのマークアップや使い方もシンプルに記述できるので、手軽に使えるところもグッドです。

また、スクロールのタイプやデュレーションなどオプションを用いることでいろいろカスタマイズすることもできます。主なオプションは、scrollerButton、scrollerButtonRotateClass、scrollType、scrollDuration、offset、fixedNavbar、onScrollStart、onScrollEndです。

各オプション項目のデフォルト値は、scrollerButtonが”#section-scroller-button”、scrollerButtonRotateClassが”rotate”、scrollTypeが”swing”、scrollDurationが1000、fixedNavbarがnullです。onScrollStartとonScrollEndはコールバック関数になります。

というわけで、セクションごとにスムーズにスクロールするボタンを実装できるjQueryプラグイン「Section Scroller」の紹介でした。ライセンスはMITとのこと。

Section Scroller

関連記事

  1. jquery.xtr

    JavaScript

    クライアントサイドで変換してくれる「jquery.xtr」

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

  2. jQuery Glow
  3. JavaScript

    jQuery illuminateを使えばボタンに光を加え点滅させたりして注目させることができる

    ちょっと面白そうだったので使ってみました。jQuery illumin…

  4. jCorner

    JavaScript

    フラットデザインに合う紙をめくったエフェクトを実装できるjQueryプラグイン「jCorner」

    jCornerというjQueryプラグインを使ってみました。フラットデ…

  5. Tag-it

    JavaScript

    サジェスト機能を搭載したタグ編集ウィジェット「Tag-it」

    Tag-itはサジェスト機能を搭載したjQuery UIプラグインによ…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP