scrollUp

JavaScript

スクロールしていくと先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」

下へスクロールしていくと、先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」を使ってみました。何気にあったら便利な機能ですよね。現在位置が上にいる時は非表示になっているんですが、下へスクロールしていくとボタンが表示されます。固定配置なのでスクロール中は常に表示されるようになります。ということで、以下、使い方です。

[ads_center]

使い方

jQueryとダウンロードしたプラグインを読み込みます。プラグインフォルダにはボタンのCSSテーマデザインもあるのでそちらも任意で読み込みます。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.scrollUp.js"></script>
<script>
$(function () {
    $.scrollUp();
});
</script>

これだけでOKです。とてもシンプルな使い方ですね。

ボタンデザインのテーマファイルは3種類あり、Text link、Pill、Tabになります。自分でフルカスタマイズしたい場合は以下のようにscrollUpというid名をCSSでデザインしていけばOKです。

#scrollUp {
    color: #fff;
    background: #ccc;
    ・・・略・・・
}

オプションではアニメーションスピードや表示されるテキストを変更することもできます。詳しくは公式サイトでご確認ください。

関連記事

  1. JavaScript

    ホバーすると中心から円形メニューが表示される「jQuery Wheel Menu」

    ホバーするとその地点を中心にして円形メニューが表示されるプラグイン「j…

  2. 3D Cube CountDown script
  3. Recursive Hover Nav
  4. WD_ImageStax

    JavaScript

    山積みされた写真をシャッフルさせるフォトギャラリー「WD_ImageStax」

    WD_ImageStaxは無造作に山積みされた写真をシャッフルさせるフ…

  5. Unicorn.js

    JavaScript

    ホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」

    おもしろいプラグインがあったのでご紹介します。テキストにホバーするとレ…

  6. responsive-flip-pricing-table

    JavaScript

    レスポンシブでフリップによる価格表示の切り替えができる「Responsive Flip Pricin…

    レスポンシブに対応し、フリップによる価格表示の切り替えもできるテーブル…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. RICOH THETA SC2
  2. 簡易アクセス
  3. SOUNDLINK MINI II Special Edition

アーカイブ

PAGE TOP