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. jQuery Notebook
  2. Radial Progress Bars

    JavaScript

    アニメーション付きのサークルプログレスバー「Radial Progress Bars」

    Radial Progress Barsは、アニメーション付きのサーク…

  3. cascadingDivs
  4. JavaScript

    スライドアニメーションが素敵なjQueryスライダー「Slideshow with jmpress.…

    とても素敵なスライドアニメーションを実装することができるjQueryス…

  5. JavaScript

    サムネイルをクリックして拡大画像が見れるレスポンシブ対応のjQuery画像ギャラリー「Superbo…

    綺麗に並んだサムネイル画像をクリックして拡大画像を見ることができるjQ…

  6. Text Rotator

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP