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

Bootstrap Show Passwordパスワードの表示・非表示を切り替えれる「Bootstrap Show Password」前のページ

iOS 11の画像フォーマットをHEIFからJPEGに戻す方法次のページHEIFからJPEGに戻す方法

関連記事

  1. no-image

    JavaScript

    スクロールした時に最適な位置に合わせてくれる「jQuery.panelSnap」

    jQuery.panelSnapは、コンテンツごとに縦に並べられたパネ…

  2. JavaScript

    マルチレベルで操作性に優れたレスポンシブ対応のjQueryナビゲーション

    レスポンシブに対応したマルチレベルの便利なjQueryナビゲーションが…

  3. Light-Zoom

    JavaScript

    CSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」

    Light-Zoomは純粋なCSSを使用した画像ズーム(拡大)機能を実…

  4. Lightense Images
  5. JavaScript

    軽量で嬉しい!画像を拡大ズームしてくれるjQueryプラグイン「Leroy Zoom」

    Leroy ZoomというjQueryプラグインを使えば、画像を拡大ズ…

  6. Custom jQuery Lightbox

    JavaScript

    デザインや使い方がシンプルな「Custom jQuery Lightbox」

    Custom jQuery Lightboxはデザインや使い方がシンプ…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6

アーカイブ

PAGE TOP