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

Simple button radiosシンプルで高性能なラジオボタンを実装できる「Simple button radios」前のページ

親要素の下端まで要素を固定表示できる「Scroll With Page」次のページno-image

関連記事

  1. Skitter

    JavaScript

    豊富なアニメーションでカスタマイズ性に優れたスライドショーを実装できる「Skitter」

    Skitterは豊富なアニメーションでカスタマイズ性に優れたスライドシ…

  2. flipLightBox
  3. JavaScript

    シンプルでスタイリッシュなLightbox風のjQueryプラグイン「Featherlight」

    シンプルでスタイリッシュなデザインが特徴的なLightbox風のjQu…

  4. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

  5. jquery countDownTimer
  6. funnyText.js

最近の記事

  1. パニーニ(フォカッチャ ベーコンときのこのゴルゴンゾーラクリーム)とエスプレッソ
  2. 広尾 スタバ
  3. 芳醇な香りのラムレーズンサンド
  4. Aモーニングセット
  5. 白トリュフの塩パンやメロンパンなど

アーカイブ

PAGE TOP