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

    Bootstrap 4を使ったステッパープラグイン「bs-stepper」

    bs-stepperはBootstrap 4を使ったステッパーを実装で…

  2. jQuery Magnify

    JavaScript

    シンプルで軽量なズーム機能を実装できる「jQuery Magnify」

    jQuery Magnifyはシンプルで軽量なズーム機能を実装すること…

  3. Force.js

    JavaScript

    要素を手軽にアニメーション化できる「Force.js」

    Force.jsはページ上の要素を手軽にアニメーション化させることがで…

  4. Dependent Dropdown

    JavaScript

    ネストされたセレクトボックスを実装できる「Dependent Dropdown」

    Dependent Dropdownはネストされたセレクトボックスを実…

  5. jQuery Glow
  6. Tiny Colorpicker

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP