jquery-backToTop

JavaScript

カスタマイズ性に優れたトップへ戻るボタンを実装できる「jquery-backToTop」

jquery-backToTopはカスタマイズ性に優れた「トップへ戻るボタン」を実装できるjQueryプラグインです。ページを下へスクロールしていくとトップへ戻るためのボタンが表示され、このボタンをクリックするとページ上部まで自動スクロールで戻ります。縦長のページには最適な機能ですね。

jquery-backToTop

デモ

デモでは2つのセクションに分かれていますが、どちらも下へスクロールしていくと右下にトップへ戻るボタンが表示されます。ここをクリックすると、各セクション内の最上部までスクロールされて戻ります。自分でいちいちスクロールして上まで行く必要がないので、とても楽ですね。

ボタンの中に表示されている矢印がクルッと上下に回転するアニメーションもとても素敵です。

jquery-backToTopはカスタマイズ性に優れているので、オプションもいろいろ用意されています。主なオプションは、backgroundColor、bottom、color、container、divFloat、effect、enabled、height、icon、left、pxToTrigger、right、scrollAnimation、theme、width、zIndexです。

ちなみに先ほどのアニメーションは「effect」という項目でいろいろ指定できます。デフォルト値は「”spin”」です。ほかにも、none、fade、spin-inverse、zoomという値から選ぶことが可能です。

オプションだけでなく、テーマやAPIなどもあり多彩なカスタマイズができるので、気になる方はぜひチェックしてみてください。ライセンスはMITになります。

jquery-backToTop

関連記事

  1. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

  2. No Vacancy

    JavaScript

    ネオンサインのようなエフェクトを実装できるjQueryプラグイン「No Vacancy」

    テキストにネオンサインのようなエフェクトを実装することができるjQue…

  3. Tendina

    JavaScript

    簡単で素早くドロップダウンメニューを実装できるjQueryプラグイン「Tendina」

    TendinaというjQueryプラグインを使えば、とても簡単で素早く…

  4. no-image
  5. pell

    JavaScript

    軽量でシンプルなWeb用のWYSIWYGエディタを実装できる「pell」

    pellは1.5KBと非常に軽量でシンプルなWeb用のWYSIWYGエ…

  6. jQuery Accordion

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP