ページトップへ、つるつるっとスクロールさせるボタン【jQuery】

ページトップへ、つるつるっとスクロールさせるボタン【jQuery】

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」内をごちゃごちゃさせたくないので、外部リンクにします。