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

no-imageシンプル・軽量なjQueryイメージビューア「WimmViewer」前のページ

レスポンシブ対応の年ベースによるjQueryタイムライン「Timeliny」次のページTimeliny

関連記事

  1. Air Datepicker

    JavaScript

    軽量でクロスブラウザ、モダンブラウザに対応した「Air Datepicker」

    Air Datepickerは軽量でクロスブラウザ、モダンブラウザに対…

  2. no-image
  3. JavaScript

    シンプルでスワイプにも対応したスライダーならSimple jQuery sliderがオススメ

    シンプルでスマホのスワイプにも対応したスライダーを実装したいって時にオ…

  4. no-image

    JavaScript

    グリッドレイアウトによるシンプルで軽量なギャラリー「Grid Gallery」

    Grid Galleryはグリッドレイアウトによるシンプルで軽量なイメ…

  5. Morphext

    JavaScript

    複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

    MorphextというjQueryプラグインを使えば、複数テキストをア…

  6. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

最近の記事

  1. ゴムの耳栓
  2. ライオンコーヒー(バニラマカダミア)
PAGE TOP