スクロールアップ【11_scrollup-master】

11_scrollup-master
———————————————————
head
ーーーーーーーーーーーーーーーー
head 部分にcssとjQueryを読み込む記述をします。

<link id="scrollUpTheme" rel="stylesheet" href="lib/css/image.css">
<script type="text/javascript" src="lib/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="lib/js/jquery.scrollUp.js"></script>
<script>
$(function () {
$.scrollUp();
});
</script>

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