scrollUp jQuery plugin

今や定番となっている「スクロールアップ」ボタン。スクロールしているとあらわれて、クリックするとトップへするするとスクロールしてくれるというボタンです。

インターネットで検索すると様々な「スクロールアップ」ボタンを見つけることができて、迷ってしまいます。

いろいろなシーンに合わせて簡単に利用できて、エフェクトも綺麗なjQueryプラグイン「scrollUp jQuery plugin」がオススメです。

サンプルを作ってみました。

上へスクロールさせるならいろんなシーンで使えるjQueryプラグイン「scrollUp jQuery plugin」サンプル


今のホームページにそのまま組み込むだけで、「スクロールアップ」ボタンの設置が出来ますのでとても簡単で便利です。

設置方法は続きをどうぞ。





【使用方法】

こちらの「scrollUp jQuery plugin」のサイトからファイルを一式ダウンロードしてきます。

<head>部分にcssのスタイルシートを読み込む記述をします。


今回はダウンロードしてきたファイル内にあるimage.cssを利用していますが、この他に

* Tab・・ひょこっと顔をだすタイプ
tab
* Pill・・長丸のデザインボタン
pill
* Link・・テキストリンク
link
用のcssファイルが用意されていますので、シーンに合わせて使うと良さそうです。

続いて、<head>内にjQueryの設定をします。



と、これだけです。これで「スクロールアップ」ボタンが表示されます。簡単ですね。

このままではデフォルトの設定になっていますので、もしカスタマイズしたいときは以下の部分を調整しましょう。



またデフォルトでは右下に表示されます。位置や見た目などのスタイルを変更したいときは、

css中の

を好きなように変更してあげれば良いです。

シンプルでカスタマイズもしやすくなっているので、シーンに合わせてデザインやエフェクトを変更するなどして上手に利用できそうですね。

この記事と関連してると思われる記事: