jQuery GoUp!

JavaScript

ページ上部にスクロール移動してくれる「jQuery GoUp!」

jQuery GoUp!は、ページ上部にスクロール移動してくれるシンプルなjQueryプラグインです。ボタンをクリックすると、ページ上部へスルスルとスムーズにスクロール移動できます。シンプルな機能ながらも、オプションがいろいろ用意されているのでカスタマイズ性にも優れています。

jQuery GoUp!

デモ

デモページでは、下へスクロールしていくと画面右下に「This is a Deme」と書かれた矢印ボタンが表示されます。ここをクリックすると、自動でページ上部までスクロールされます。

スムーズに上まで移動できるので、縦長のページなどでは特に便利な機能ですね。使い方も非常に簡単なので、サクッと手軽に実装することができます。

オプションの数もけっこう豊富なので、カスタマイズして使用したい人にもピッタリです。主なオプション項目は、location、locationOffset、bottomOffset、containerSize、containerRadius、containerClass、arrowClass、containerColor、arrowColor、trigger、entryAnimation、alwaysVisible、goupSpeed、hideUnderWidth、title、titleAsText、titleAsTextClass、zIndexです。

コンテナのサイズやカラー、矢印のカラーや上まで移動するスピード、タイトルの指定など、細部まで自分好みにカスタマイズできるのはうれしいですね。

ちなみに、スピードのデフォルト値は「slow」になります。ほかにも、「normal」か「fast」を指定することが可能です。

というわけで、ページ上部までスクロール移動する機能を実装できるカスタマイズ性に優れたjQueryプラグイン「jQuery GoUp!」の紹介でした。

jQuery GoUp!

no-image豊富なCSSアニメーションエフェクトを実装できる「effect.css」前のページ

タッチ対応のレスポンシブなテーブルを実装できる「tabellajs」次のページtabellajs

関連記事

  1. Toast

    JavaScript

    アニメーション付きでスタッキングしていくメッセージ通知「Toast」

    Toastはアニメーション付きのメッセージ通知を表示することができるj…

  2. jQuery Panelize Plugin
  3. Cube-jQuery-Slider

    JavaScript

    3Dキューブなスライダーを実装できる「Cube-jQuery-Slider」

    Cube-jQuery-Sliderは、3Dキューブなスライダーを実装…

  4. Skitter

    JavaScript

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

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

  5. Horizontal Timeline

    JavaScript

    水平方向のタイムラインを実装できる「Horizontal Timeline」

    Horizontal Timelineは水平方向に移動可能なタイムライ…

  6. multi-list

    JavaScript

    複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

    multi-listは、順序付けされていないリストを複数の選択可能なリ…

最近の記事

  1. Anker PowerPort 5-in-1 37.5W Hub
  2. α7C + FE28-60mm F4-5.6
  3. Apple Watch Series 6
  4. iPad Air

アーカイブ

PAGE TOP