今や定番となっている「スクロールアップ」ボタン。スクロールしているとあらわれて、クリックするとトップへするするとスクロールしてくれるというボタンです。
インターネットで検索すると様々な「スクロールアップ」ボタンを見つけることができて、迷ってしまいます。
いろいろなシーンに合わせて簡単に利用できて、エフェクトも綺麗なjQueryプラグイン「scrollUp jQuery plugin」がオススメです。
サンプルを作ってみました。
上へスクロールさせるならいろんなシーンで使えるjQueryプラグイン「scrollUp jQuery plugin」サンプル
今のホームページにそのまま組み込むだけで、「スクロールアップ」ボタンの設置が出来ますのでとても簡単で便利です。
設置方法は続きをどうぞ。
【使用方法】
こちらの「scrollUp jQuery plugin」のサイトからファイルを一式ダウンロードしてきます。
＜head＞部分にcssのスタイルシートを読み込む記述をします。
|
1 |
<link id="scrollUpTheme" rel="stylesheet" href="css/themes/image.css" |
今回はダウンロードしてきたファイル内にあるimage.cssを利用していますが、この他に
＊ Tab・・ひょこっと顔をだすタイプ
＊ Pill・・長丸のデザインボタン
＊ Link・・テキストリンク
用のcssファイルが用意されていますので、シーンに合わせて使うと良さそうです。
続いて、＜head＞内にjQueryの設定をします。
|
1 2 3 4 5 6 7 |
<script type="text/javascript" src="js/lib/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.scrollUp.js"></script> <script> $(function () { $.scrollUp(); }); </script> |
と、これだけです。これで「スクロールアップ」ボタンが表示されます。簡単ですね。
このままではデフォルトの設定になっていますので、もしカスタマイズしたいときは以下の部分を調整しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* scrollUp full options*/ $(function () { $.scrollUp({ scrollName: 'scrollUp', topDistance: '1500', // トップからどれだけの高さで表示させるか(px) topSpeed: 300, // トップへ戻るスピード (ms) animation: 'fade', // Fade, slide, noneの中から選択 animationInSpeed: 800, // ボタンが現れるスピード (ms) animationOutSpeed: 200, // ボタンが消えるスピード (ms) scrollText: 'トップへ', // テキスト表示させるときの文字 scrollImg: false, // イメージを表示させるときはtrueにします activeOverlay: false // トップからの距離を指定した色の線で表示してくれます。(例)activeOverlay: '#00FFFF' }); }); |
またデフォルトでは右下に表示されます。位置や見た目などのスタイルを変更したいときは、
css中の
|
1 2 3 4 5 6 7 |
#scrollUp { bottom: 20px; right: 20px; padding: 10px 20px; background: #555; color: #fff; } |
を好きなように変更してあげれば良いです。
シンプルでカスタマイズもしやすくなっているので、シーンに合わせてデザインやエフェクトを変更するなどして上手に利用できそうですね。
あわせてお読みください
MyjQueryPlugins BackToTop pluginページの先頭にスクロールさせる「Back To Top」リンクボタン。最近ではいろいろな「Bac…
Smooth Vertical or Horizontal Page Scrolling with jQuery 他のサイトと差をつけて、サイトを横スクロール…
Portfoliojs 今回は、デスクトップでもタブレットでもスマホにでも使えるイメージスライダー『Portfoliojs』を紹介します。 このjQueryギャ…
コメントを残す