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. simplePagination.js
  2. Smooth Scroll behavior polyfill
  3. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン19選のまとめ 2012/04 – 2012/0…

    2012年4月〜2012月7月までの当ブログで紹介したjQueryプラ…

  4. jQuery.mousetip

    JavaScript

    マウスの動きや位置に追従してくるツールチップを実装できる「jQuery.mousetip」

    jQuery.mousetipはマウスの動きや位置に追従してくる軽量の…

  5. no-image

    JavaScript

    スライドアニメーションによる多階層なハンバーガーメニュー「ggContentMenu」

    ggContentMenuはスライドアニメーションを備えた多階層に最適…

  6. pagePiling.js

    JavaScript

    垂直にスライドするようなスクロールを実装できるjQueryプラグイン「pagePiling.js」

    pagePiling.jsは垂直にスライドするようなスクロール機能を実…

最近の記事

  1. King クリーニングティッシュ
  2. PDA-STN36S
  3. クッキー&クリーム ポップコーン
  4. マウイチップス マウイオニオン味
  5. グリーンビーントゥーバー

アーカイブ

PAGE TOP