ページトップリンクを設定してみよう
最近のWEBページはページをスクロールすると右下にページトップに戻るボタンが出てくるのが当たり前になっています。
ここでは、このボタンの簡単な作り方を説明します。
top1-before.html を開いて練習をしましょう
01 スタイルシートをリンク
<head>内にスタイルシートのリンクを読み込ませる
ページトップボタンのデザインは自由に変更してください
HTML
<link rel="stylesheet" href="css/p-top.css">
</head>
02 ページトップを表示させたい場所へコードを入れる
赤文字の部分はテキスト表示部分なので自由に変更してください
例）<p id="page-top"><a href="#">TOP</a></p>
HTML
<p id="page-top"><a href="#">▲<br>Page Top</a></p>
<footer>
アイコンに変更したい場合は、画像をリンクさせる
アイコンはicoon monoのページから作成すると簡単です。
HTML
<p id="page-top"><a href="#"><img src="img/apple.png" alt="TOP"></a></p>
<footer>
03 jQueryのリンク・JavaScriptを読み込ませる
</body>の上にjQuery本体と自作p-top.jsを入れる
HTML
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/p-top.js"></script>
<script src="js/script.js"></script>
</body>