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. jQuery Page

    JavaScript

    モバイルに最適なスライドやフリップを実装できる「jQuery Page」

    jQuery Pageは、スマホなどモバイルに最適なスライドやフリップ…

  2. imgViewer2

    JavaScript

    画像のズームとパン機能を備えたjQueryプラグイン「imgViewer2」

    imgViewer2は画像のズームとパン機能を備えたjQueryプラグ…

  3. no-image

    JavaScript

    超シンプルでオプションもわかりやすいjQueryスライダー「Free Simple Slider」

    Free Simple Sliderは、超シンプルで使い方も簡単なスラ…

  4. HoldOn.js

    JavaScript

    ユーザーの待機中に表示させるアニメーション実装「HoldOn.js」

    HoldOn.jsはユーザーが待機している間に表示させるアニメーション…

  5. Naver

    JavaScript

    シンプルですごくいい!レスポンシブに合うナビゲーションのjQueryプラグイン「Naver」

    NaverというjQueryプラグインがすごくシンプルでよかったのでご…

  6. jQuery touchSwipe Carousel

最近の記事

  1. スターバックス ハウスブレンド
  2. Anker PowerHouse 100
  3. ミニミニ温度計(シルバー)

アーカイブ

PAGE TOP