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!

関連記事

  1. jcSlider

    JavaScript

    CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」

    jcSliderは、アニメーションを使用しないスライダーのプラグインで…

  2. JavaScript

    クールでお洒落なナビゲーションを簡単に実装できるjQueryプラグイン「Kwicks for jQu…

    クールでお洒落なナビゲーションを簡単に実装することができるjQuery…

  3. Checkify

    JavaScript

    軽量でカスタマイズ性も高いjQueryバリデーションプラグイン「Checkify」

    Checkifyは軽量でカスタマイズ性も高いバリデーション機能を実装で…

  4. reveal-it.js

    JavaScript

    左から右へテキストが美しくフェードイン表示する「reveal-it.js」

    reveal-it.jsはテキストが左から右へかけて徐々にフェードイン…

  5. CircularLoader.js

    JavaScript

    シンプルな円形プログレスバーを簡単に実装できる「CircularLoader.js」

    CircularLoader.jsは円形プログレスバーを簡単に実装する…

  6. chalk-animation

    JavaScript

    カラフルなアニメーションを実装できる「chalk-animation」

    chalk-animationはカラフルなアニメーションによるテキスト…

最近の記事

  1. cheero Stream 10000mAh
  2. BOSE HOME SPEAKER 300
  3. RP-PC112
  4. SRS-XB402M
  5. Lite LR30

アーカイブ

PAGE TOP