scrollUp jQuery plugin
「スクロールアップ」ボタン。
縦に短いページでは不要ですが、ある程度以上のボリュームになると必要ですよね。
特にスマホサイトでは必須かも。
今回ご紹介するのは「scrollUp jQuery plugin」
これ、最近のお気に入りです。
ある程度スクロールすると自動的に指定位置に表れて、
クリックするとページトップへつるつるっとスクロールしてくれるというボタンです。
「スクロールアップ」ボタンのライブラリは多種多様、ほんとたくさんあります。
でも、「画面の大きさにあわせて相対的な位置指定が出来ること」と
「表示のタイミングが指定できる」「スクロールスピードが調整できる」の３点が私的な必須項目なんで、「scrollUp jQuery plugin」を使っています。
サンプルはこちら
【設置方法】
こちらの「scrollUp jQuery plugin」のサイトからファイルを一式ダウンロードしてきます。
「head」部分にcssとをjQueryを読み込む記述をします。
<link id="scrollUpTheme" rel="stylesheet" href="css/themes/image.css">
<script type="text/javascript" src="js/lib/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollUp.js"></script>
<script>
$(function () {
$.scrollUp();
});
</script>
これで「スクロールアップ」ボタンが表示されます。
上記ではダウンロードしてきたファイル内にあるimage.cssを記述していますが、
この他に用のcssファイルが用意されていますので、シーンに合わせて使うと良さそうです。
私の場合は「トップに戻る」ボタンを画像で作成し表示させますのでimage.cssを改編します。
以下がCSSです。
#scrollUp {
bottom: 20px; /* ブラウザ下辺からの位置 */
right: 20px; /* ブラウザ右辺からの位置 */
height: 34px; /* Height of image */
width: 120px; /* Width of image */
background: url(../../img/btn_scroll_pagetop_ov.png) no-repeat;/* 画像のフォルダ,ファイルを指定 */
}
カスタマイズする場合は、以下のオプション項目です。
/* 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 // トップからの距離を指定した色の線で表示してくれます。
});
});
もちろん、スクリプトは「head」部分に外部jsを作成しリンクさせてもＯＫです。
私の場合は、「head」内をごちゃごちゃさせたくないので、外部リンクにします。
