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

■ はじめに

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


■ 設定手順

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

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

 * 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 << ↑アイコン画

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

 * jQuery(v1.7以上)とライブラリ(css, js)をインポートする
サンプルより
<!-- 【2】 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>

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

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

【4】 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>
<!-- 【2】 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>

<!-- 【3】 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>
<!-- 【4】 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;
    /* 略 */
}