iSARA模写 第8回です。
前回はこちら↓
今回はこちらの右下に現れる矢印（トップへ戻るボタン）の実装です。
縦に長いLPなどによく使われます。
iSARAのトップへ戻るボタンは、
・少しスクロールすると現れて、
・押すとページのトップまでスクロールしてくれます。
動きはjQueryで実装しますが、コピペ可能です。
①レイアウトの確認
今回のレイアウトはそんなに難しくありません。
<div></div>で矢印を置く箱を作って(②HTML)、
中に矢印の絵を置き(③Font Awesome使用)、
画面右下に固定します(④CSS)。
その後、矢印を押したときにトップページヘ戻るなどの実装をjQueryでします。(⑤jQuery)
②HTML
footerのとじタグ(</footer>)の下に
下記のようにコードを書きます↓
<div class="scroll_button"><a href="#" class="back-to-top"></a></div>これで矢印を入れる箱ができました。
③Font Awesomeで矢印を設置
矢印はFont Awesome
よりダウンロードして使用します。
細かい設置方法は他の方々がたくさん記事を書いているので、
割愛しますが、
設置方法は、
(1)headタグ内に下記のコードを書く
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">(2)①で作ったdivの中に下記コードを書くだけです。
<i class="fas fa-chevron-up fa-2x"></i>→(2)のコードを書くとdivはこうなります。
<div class="scroll_button"><a href="#" class="back-to-top"><i class="fas fa-chevron-up fa-2x"></i></a></div>④CSSで整える
CSSで背景の色や表示位置などを整えます。
コードは下記の通り↓
.scroll_button a{
position: fixed;
display: block;
right:50px;
bottom:100px;
background: #ECECEC;
color:black;
padding:20px;
/* スクロールボタンを常に前面に */
z-index: 999;
}⑤jQuery で動きをつける
jQueryはよくわかっていなくても今回はコピペで実装可能です。
下記のコードをbodyの閉じタグ(</body>)のすぐ上に書きます。
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
jQuery(function ($) {
var topBtn = $('.back-to-top');
topBtn.hide();
//スクロールが300に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>初めてやるときは全然分からなかったので、コピペでした。
だんだん手の混んだサイトを作るようになってくるとjQueryの理解もしておいたほうがいいですが、
初心者模写の段階では、jQueryの勉強で消耗するのはもったいないと思います。
次回同じ実装が出てきたときには使えるように、
記録に残しておく、ブックマークしておくなどがおすすめです！
