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. Skippr

    JavaScript

    軽くて速いスライドショーを実装できるjQueryプラグイン「Skippr」

    SkipprというjQueryプラグインを使えば、軽くて速いスライドシ…

  2. no-image

    JavaScript

    水平・垂直に対応したカルーセルスライドショー「jCarousel」

    jCarouselは水平・垂直に対応したカルーセルスライドショーを実装…

  3. JavaScript

    値を指定することで好きなカラースウォッチを表示できるjQueryプラグイン「Color Swatch…

    これはどこかで使いたくなるjQueryプラグインですね。カラー値を指定…

  4. jQuery-LightBox

    JavaScript

    軽量でモバイルフレンドリーなLightbox実装「jQuery-LightBox」

    jQuery-LightBoxは、軽量でレスポンシブにも対応したモバイ…

  5. notie.js

    JavaScript

    クリーンでシンプルな通知を表示できる「notie.js」

    notie.jsはクリーンでシンプルな通知を表示できるJSプラグインで…

  6. jQuery Quick Modal

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP