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. ウィンターホワイトマグツリー
  2. 読書の進捗状況を非表示にする
  3. 牛すじ煮込みカレーと温野菜
  4. クリスマスブレンドとホリデースクープ
  5. バタースコッチドーナツ
PAGE TOP