jQuery Section Navi Plugin

JavaScript

セクション単位でアップダウンできる「jQuery Section Navi Plugin」

jQuery Section Navi Pluginは、コンテンツのセクション単位でアップダウンできるボタンを実装できるjQueryプラグインです。縦長ページなどで、区切りよくコンテンツを読み進めていきたい時なんかに便利ですね。

jQuery Section Navi Plugin

デモ

デモではセクションごとにコンテンツが縦に並べられていて、画面右下には「Down」と書かれたボタンが表示されています。ちなみに大きい画面でコンテンツが下まで見えている状態ではボタンが表示されないので、その場合は画面の横幅を縮小することでボタンが表示されるかと思います。

Downボタンをクリックすると、セクション単位でスクロールされます。下へスクロールされると「Down」の他に「Up」というボタンも表示されます。Down/Upボタンからセクション単位でサクサクと移動できるので、効率的に目的のコンテンツの始まりの位置へ移動できますね。

ちなみにスクロール移動されるスピードなどはオプションから調節できます。用意されているオプション項目は、buttonUp、buttonDown、offset、speed、hideButtons、speedHideBtn、ignoreFirst、useEmptyです。

というわけで、セクション単位でスクロール移動するアップダウンボタンを実装できるjQueryプラグイン「jQuery Section Navi Plugin」の紹介でした。

jQuery Section Navi Plugin

関連記事

  1. Pagination.js

    JavaScript

    シンプルでさまざまなカスタマイズが可能な「Pagination.js」

    Pagination.jsはシンプルでさまざまなカスタマイズが可能なペ…

  2. suitabs

    JavaScript

    横や縦にスライドできるスライドショー&タブ実装のjQueryプラグイン「suitabs」

    suitabsはスライドショー&タブを実装することができるjQuery…

  3. Rainbow.js
  4. no-image

    JavaScript

    レスポンシブでスタイリッシュな「lightbox-jquery-plugin」

    lightbox-jquery-pluginは、レスポンシブに対応した…

  5. Crosscover

    JavaScript

    多彩なアニメーションがいい!シンプルで使いやすいjQueryイメージカルーセル「Crosscover…

    Crosscoverはシンプルで多彩なアニメーションが魅力的なイメージ…

  6. Parazoom

    JavaScript

    クールに拡大・チルトする画像ズーム「Parazoom」

    Parazoomはクールに拡大・チルトする画像ズーム機能を実装できるj…

最近の記事

  1. Kindle Oasis
  2. OWL-WDDESK01
  3. ワンタッチ着脱フィルターキット
  4. Soundcore Ace A1

アーカイブ

PAGE TOP