【jQuery】マテリアルデザインのGo to Topボタン ～ Material ScrollTop Button ～

jQuery

■ はじめに

 * スクロールした際に上に戻るボタン（Go to Topボタン）で
   自作するのは大変そうなので、何かないかと探してたらよさげなのがあったので、メモをする

■ 公式サイト

https://github.com/bartholomej/material-scrolltop

ライセンス

 * MIT (商用利用可能)
https://github.com/bartholomej/material-scrolltop/blob/master/LICENSE

デモサイト

http://bartholomej.github.io/material-scrolltop/

■ 設定手順

今回は、一番簡単なダウンロードする方法を記載 
【１】 ダウンロードして解凍する
【２】 jQueryとライブラリをインポートする
【３】 JavaScript でライブラリを初期化する
【４】 Go to Topボタンを設置する
* 他の方法は、以下のURL参照
[[https://github.com/bartholomej/material-scrolltop#install]]

【１】ダウンロードして解凍する

 * Material ScrollTop Buttonを以下のサイトからダウンロードして解凍する
https://github.com/bartholomej/material-scrollTop/releases/tag/v1.0.1
解凍後のフォルダ構成 
 + src << Material ScrollTop Button本体
    + material-scrolltop.css << Material ScrollTop ButtonのCSS ★超重要★
    + material-scrolltop.js  << Material ScrollTop ButtonのJavaScript ★超重要★
    + icons
       + top-arrow.svg << ↑アイコン画像

【２】 jQueryとライブラリをインポートする 

 * jQuery（v1.7以上）とライブラリ(css, js)をインポートする
サンプルより 
<!-- 【２】 jQueryとライブラリをインポートする -->
<!-- jQuery -->
<script src="">https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
<!-- Material ScrollTop stylesheet -->
<link rel="stylesheet" href="material-scrolltop.css">
<!-- material-scrolltop plugin -->
<script src="material-scrolltop.js"></script>

【３】 JavaScript でライブラリを初期化する

サンプルより 
<!-- 【３】 JavaScript でライブラリを初期化する -->
<!-- Initialize material-scrolltop -->
<script>
$(document).ready(function() {
   $('body').materialScrollTop({
     revealElement: 'h1',   // スクロール対象となる要素
     revealPosition: 'bottom'   // ボタン表示位置
   });
});
</script>

【４】 Go to Topボタンを設置する

サンプルより 
<!-- material-scrolltop button -->
<button class="material-scrolltop" type="button"></button>

■ サンプル

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Hello World Demo</title>
<!-- 【２】 jQueryとライブラリをインポートする -->
<!-- jQuery -->
<script src="">https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
<!-- Material ScrollTop stylesheet -->
<link rel="stylesheet" href="material-scrolltop.css">
<!-- material-scrolltop plugin -->
<script src="material-scrolltop.js"></script>

<!-- 【３】 JavaScript でライブラリを初期化する -->
<!-- Initialize material-scrolltop -->
<script>
$(document).ready(function() {
   $('body').materialScrollTop({
     revealElement: 'h1',   // スクロール対象となる要素
     revealPosition: 'bottom'   // ボタン表示位置
   });
});
</script>
</head>
<body>
<h1>Hello World!</h1>
<div>00</div>
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
<div>08</div>
<div>09</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
<div>26</div>
<div>27</div>
<div>28</div>
<div>29</div>
<div>30</div>
<div>31</div>
<div>32</div>
<div>33</div>
<div>34</div>
<div>35</div>
<div>36</div>
<div>37</div>
<div>38</div>
<div>39</div>
<div>40</div>
<div>41</div>
<div>42</div>
<div>43</div>
<div>44</div>
<div>45</div>
<div>46</div>
<div>47</div>
<div>48</div>
<div>49</div>
<div>End</div>
<!-- 【４】 Go to Topボタンを設置する -->
<!-- material-scrolltop button -->
<button class="material-scrolltop" type="button"></button>
</body>
</html>

■ Material ScrollTop Buttonあれこれ

ボタン色を緑系から変更したい

 * material-scrolltop.css の「background（2か所）」「background-color（1か所）」を変更
material-scrolltop.css (改変版:青系に変換) 
.material-scrolltop {
    /* 略 */
    background: #4c7aaf; /* !!Here!! original #4caf50; */
    /* 略 */
}

.material-scrolltop:hover {
    background-color: #4c7aaf; /* !!Here!! original #4caf50; */
    /* 略 */
}

.material-scrolltop::before {
    /* 略 */
    background: #6599bb; /* !!Here!! original #66bb6a; */
}

フォーカス枠を消す

 * Material Design for Bootstrap 4 (MDB) のテンプレート上で使用した時に
   ボタンをクリックした時、ボタンにフォーカス枠が表示された。
   特に、フォーカスを当てる必要はないので外す方法を考えてみた
 => 以下を追記する
material-scrolltop.css 
/* !!Here!! Add */
.material-scrolltop:focus {
    outline: none;
}

マウスカーソルを指マークにする

 * 「cursor:pointer;」を.material-scrolltop に追加する
material-scrolltop.css 
.material-scrolltop {
    /* 略 */
    cursor:pointer; /* !!Here!! Add */
    cursor: hand;
    /* 略 */
}

参考文献

http://phiary.me/material-scrolltop-usage/