タイトル通り、フローティングボタンを真似てみました。
よく見る、スクロールしたら出てくるボタンは何だろうと思っていたので、調べたところ、フローティングボタンと呼ばれるものだと知った。
どうやって、実装してるのか調べたところ、「スクロールの途中で出現するフローティングボタンのJavaScript」が出てきたので、これを真似て、作ってみた。
ソース
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も使うことで、豊富なデザインを実現していることがわかった。