スクロールアップ【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を作成しリンクさせてもOKです。
私の場合は、「head」内をごちゃごちゃさせたくないので、外部リンクにします。