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. How satisfied are you? Slider
  2. no-image

    JavaScript

    かっこいいニュース・バナースライドショー実装「jQuery News Slider」

    jQuery News Sliderは、かっこいいニュース・バナースラ…

  3. no-image

    JavaScript

    スマホなどに最適なテーブルを実装できる「Mobile-Friendly Table」

    Mobile-Friendly Tableはスマホなどのモバイルに最適…

  4. JavaScript

    とても簡単にクールなドロップダウンを実装できるjQueryプラグイン「DropKick」

    個人的に使いやすそうだったので備忘録です。DropKickというjQu…

  5. jQuery Hero Slider Plugin
  6. no-image

    JavaScript

    シンプルなドロップダウンメニューを実装できるjQueryプラグイン「snakeMenu」

    snakeMenuはシンプルなアニメーションによるドロップダウンメニュ…

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP