フローティングボタンを真似てみた

タイトル通り、フローティングボタンを真似てみました。
よく見る、スクロールしたら出てくるボタンは何だろうと思っていたので、調べたところ、フローティングボタンと呼ばれるものだと知った。
どうやって、実装してるのか調べたところ、「[スクロールの途中で出現するフローティングボタンのJavaScript](https://haniwaman.com/floating/)」が出てきたので、これを真似て、作ってみた。

#ソース
```floating_practice.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>フローティング　練習</title>
	<link rel="stylesheet" href="base.css">
	<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
	<script>
		jQuery(window).on("scroll", function($) {
		  if (jQuery(this).scrollTop() > 10) {
		    jQuery('.floating').show();
		  } else {
		    jQuery('.floating').hide();
		  }
		});

		jQuery('.floating').click(function () {
		  jQuery('body,html').animate({
		    scrollTop: 0
		  }, 500);
		  return false;
		});
	</script>
</head>
<body>
	<div class="floating">
  		<a href="#">トップへ</a>
	</div>
	
	<div>
		<table id="table_sample1" border="1">
			<caption>サンプルテーブル colspan</caption>

			<thead>
				<tr>
					<th colspan="3">ヘッダー</th>
				</tr>
			</thead>

			<tfoot>
				<tr>
					<td>フット1</td>
					<td>フット2</td>
					<td>フット3</td>
				</tr>
			</tfoot>

			<tbody>
				<tr>
					<td>セル1</td>
					<td>セル2</td>
					<td>セル3</td>
				</tr>
			</tbody>
		</table>
	</div>

	<div>
		<table id="table_sample2" border="1">
			<caption>サンプルテーブル rowspan</caption>

			<thead>
				<tr>
					<th colspan="3">ヘッダー</th>
				</tr>
			</thead>

			<tfoot>
				<tr>
					<td>フット1</td>
					<td>フット2</td>
					<td>フット3</td>
				</tr>
			</tfoot>

			<tbody>
				<tr>
					<td rowspan="2">セル1</td>
					<td>セル2</td>
					<td>セル3</td>
				</tr>

				<tr>
					<td>セル4</td>
					<td>セル5</td>
				</tr>
			</tbody>
		</table>
	</div>


	<div>
		<table id="table_sample3" border="1">
			<caption>サンプルテーブル rowspan colspan</caption>

			<thead>
				<tr>
					<th colspan="4">ヘッダー</th>
				</tr>
			</thead>

			<tfoot>
				<tr>
					<td>フット1</td>
					<td>フット2</td>
					<td>フット3</td>
					<td>フット4</td>
				</tr>
			</tfoot>

			<tbody>
				<tr>
					<td rowspan="2" colspan="3">セル1</td>
					<td>セル2</td>
				</tr>

				<tr>
					<td>セル3</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div>
		<table id="table_sample3" border="1">
			<caption>サンプルテーブル rowspan colspan</caption>

			<thead>
				<tr>
					<th colspan="4">ヘッダー</th>
				</tr>
			</thead>

			<tfoot>
				<tr>
					<td>フット1</td>
					<td>フット2</td>
					<td>フット3</td>
					<td>フット4</td>
				</tr>
			</tfoot>

			<tbody>
				<tr>
					<td rowspan="2" colspan="3">セル1</td>
					<td>セル2</td>
				</tr>

				<tr>
					<td>セル3</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div>
		<table id="table_sample3" border="1">
			<caption>サンプルテーブル rowspan colspan</caption>

			<thead>
				<tr>
					<th colspan="4">ヘッダー</th>
				</tr>
			</thead>

			<tfoot>
				<tr>
					<td>フット1</td>
					<td>フット2</td>
					<td>フット3</td>
					<td>フット4</td>
				</tr>
			</tfoot>

			<tbody>
				<tr>
					<td rowspan="2" colspan="3">セル1</td>
					<td>セル2</td>
				</tr>

				<tr>
					<td>セル3</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div>
		<table id="table_sample3" border="1">
			<caption>サンプルテーブル rowspan colspan</caption>

			<thead>
				<tr>
					<th colspan="4">ヘッダー</th>
				</tr>
			</thead>

			<tfoot>
				<tr>
					<td>フット1</td>
					<td>フット2</td>
					<td>フット3</td>
					<td>フット4</td>
				</tr>
			</tfoot>

			<tbody>
				<tr>
					<td rowspan="2" colspan="3">セル1</td>
					<td>セル2</td>
				</tr>

				<tr>
					<td>セル3</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div>
		<table id="table_sample3" border="1">
			<caption>サンプルテーブル rowspan colspan</caption>

			<thead>
				<tr>
					<th colspan="4">ヘッダー</th>
				</tr>
			</thead>

			<tfoot>
				<tr>
					<td>フット1</td>
					<td>フット2</td>
					<td>フット3</td>
					<td>フット4</td>
				</tr>
			</tfoot>

			<tbody>
				<tr>
					<td rowspan="2" colspan="3">セル1</td>
					<td>セル2</td>
				</tr>

				<tr>
					<td>セル3</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div>
		<table id="table_sample3" border="1">
			<caption>サンプルテーブル rowspan colspan</caption>

			<thead>
				<tr>
					<th colspan="4">ヘッダー</th>
				</tr>
			</thead>

			<tfoot>
				<tr>
					<td>フット1</td>
					<td>フット2</td>
					<td>フット3</td>
					<td>フット4</td>
				</tr>
			</tfoot>

			<tbody>
				<tr>
					<td rowspan="2" colspan="3">セル1</td>
					<td>セル2</td>
				</tr>

				<tr>
					<td>セル3</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div>
		<table id="table_sample3" border="1">
			<caption>サンプルテーブル rowspan colspan</caption>

			<thead>
				<tr>
					<th colspan="4">ヘッダー</th>
				</tr>
			</thead>

			<tfoot>
				<tr>
					<td>フット1</td>
					<td>フット2</td>
					<td>フット3</td>
					<td>フット4</td>
				</tr>
			</tfoot>

			<tbody>
				<tr>
					<td rowspan="2" colspan="3">セル1</td>
					<td>セル2</td>
				</tr>

				<tr>
					<td>セル3</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div>
		<table id="table_sample3" border="1">
			<caption>サンプルテーブル rowspan colspan</caption>

			<thead>
				<tr>
					<th colspan="4">ヘッダー</th>
				</tr>
			</thead>

			<tfoot>
				<tr>
					<td>フット1</td>
					<td>フット2</td>
					<td>フット3</td>
					<td>フット4</td>
				</tr>
			</tfoot>

			<tbody>
				<tr>
					<td rowspan="2" colspan="3">セル1</td>
					<td>セル2</td>
				</tr>

				<tr>
					<td>セル3</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>
```

```base.css
.floating {
  position: fixed;
  right: 8px;
  bottom: 8px;
  display: none;
}

.floating a {
  display: block;
  color: #fff;
  background: #000;
  padding: 8px;
  text-decoration: none;
  opacity: 0.6;
}

.floating a:hover {
  opacity: 1;
}
```

#所感
スクロールできるように、テーブルをたくさん作って、フローティングボタンを貼り付けただけのソースです。
`jQuery`を使って、フローティングボタンを実現していることだけはわかった。
(中身は全然理解できてないが...)
勉強したばかりで理解はまだまだ浅いが、Web制作はHTMLだけでなく、`JavaScript `と`jQuery`も使うことで、豊富なデザインを実現していることがわかった。

#参考資料
[スクロールの途中で出現するフローティングボタンのJavaScript](https://haniwaman.com/floating/)