月別アーカイブ: 2018年6月

スクロールアップ

——————-
11_scrollup-master
——————-

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 // トップからの距離を指定した色の線で表示してくれます。
    });
});