スクロールすると現れるトップへ戻るボタン
こんにちは、ヒロ60です。
サイト制作のスキルを伸ばすために、それに関係する仕事なら何でも引き受けております。
そのため制作だけではなく修正のご依頼も結構いただくことがあり、先日は税理士先生のサイトでいくつかの修正を行いました。
その中の１つにネットで調べながら対応した内容があったので、また忘れないように記事にしておきます。
同じことで悩んでいるサイト制作初心者の方でも簡単に導入できる方法になりますので、この記事が参考になれば嬉しいです。
さて、依頼をいただいた内容は「スクロールすると画面上部に戻れる「トップへ戻る」ボタン」を付けてほしいというものです。
私も人生において「過去へ戻るボタン」を付けてほしいのですが、どなたか実装していただけませんかね？
それはさておき、ボタンはHTMLとCSSで簡単に実装可能です。
下記のコードをウェブページのHTMLファイルとCSSファイルに追加するだけで、上に戻るボタンが表示されます。
HTMLとCSS
【HTML】
<!-- トップへ戻るボタン -->
<div id="page_top"><a href="#"></a></div>【CSS】
#page_top {
position: fixed;
right: 10px;
width: 55px;
height: 55px;
background: rgba(102, 102, 102, 0.5) no-repeat;
}
#page_top a::before {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 25px;
height: 25px;
margin: auto;
color: #fff;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f077';
font-size: 25px;
text-align: center;
}これによって以下のようなボタンが画面右下に表示されるようになる･･･のですが、もう１つやることがあります。
Font Awesomeを使用するための設定
四角の中の上向きのブーメランのような文字は「Font Awesome」というWebから取得してきたアイコンフォントを使用しています。
そのため、「Font Awesome」を使用できるように以下のコードをHTMLファイルの<head>〜</head>の中に追加する必要があります。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">これで上向きのブーメランのような文字が表示されるようになります。
このコードを追加していないとボタンは以下のような表示になってしまいますので注意してください。
余談ですが、上向きのブーメランは「かつ」を変換すると数学記号として変換することができます。「∧」
下向きブーメランは「または」の変換です。「∨」
以上、ちょっとした暮らしのワンポイントアドバイスでした。
スクロールしたら現れるようにする
さて、ボタンは表示できたのですが、まだ依頼は完了していません。
頼まれているのは「スクロールすると画面上部に戻れる「トップへ戻る」ボタン」です。
今のままですと常時ボタンが表示されているため、スクロールしたら現れるという条件を満たしていません。
そして、その条件を満たすためにはjQueryを使う必要があります。
その下準備としてjQueryを利用できるように、以下のコードをHTMLファイルの<head>〜</head>の中に追加しておきます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>そして、以下のコードを追加します。
jQuery(function() {
var appear = false;
var pagetop = $('#page_top');
$(window).scroll(function () {
if ($(this).scrollTop() > 120) { //120pxスクロールしたら
if (appear == false) {
appear = true;
pagetop.stop().animate({
'bottom': '16px' //下から16pxの位置に
}, 500); //0.5秒かけて現れる
}
} else {
if (appear) {
appear = false;
pagetop.stop().animate({
'bottom': '-80px' //下から-80pxの位置に
}, 500); //0.5秒かけて隠れる
}
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500); //0.5秒かけてトップへ戻る
return false;
});
});追加する場所は、
・HTMLファイルの<head>内
・HTMLファイルの<body>の最後あたり
・外部ファイルとして作成した.jsファイル
のいずれかになります。
.jsファイルの場合はそれを読み込ませるための記述も必要になりますので注意してください。
これで120pxほどスクロールすることで上に戻るボタンが表示されるようになりました。
実際の動きは以下の画面で確認できます。
「Run Pen」をクリックすると実際の動きのサンプルをご確認いただけます。
このように実装したボタンを確認してOKをいただき、無事に納品完了となりました。
もし、現在稼働中のサイトで動作を見直したい部分だったり、見た目を変えたいといった修正がありましたら、一度相談してみませんか？
まだまだ勉強中の身、格安で対応させていただきます。
また、コーポレートサイトや集客用のサイト制作をご検討の方は、ぜひ詳しい内容をお聞かせくださいませ。
サイト制作については以下の記事をご参照ください。
読んでいただきありがとうございました！ いただいたサポートは勉強と執筆作業の糧（水分・糖分）に使わせていただきます！