最近は必ずと言っていいほど設置してある「ページトップへ戻る」ボタン。当サイトでも少しスクロールすると画面右下に表示されるようにしています。
クリックするとページの一番上にスムーススクロール(スルスルっと移動)する仕様がほとんどだと思いますが、今回はjQueryでこのページトップへ戻るボタンを実装する方法を解説していきます。
jQuery、jsファイルを読み込む
まずは、jQueryを動かすためにjQuery本体をCDNで読み込むか、ファイルをダウンロードして読み込む必要があります。詳しくは、jQueryの読み込み方法(導入方法)【jQuery】で解説していますのでご覧ください。
続いて、ページトップに戻るボタンの実装するjQueryを書き込む為のjsファイルを作成し読み込みます。
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/script.js"></script>例として、今回はjQuery本体はダウンロードして読み込み、jsファイルは「script.js」としています。
これらをbodyの閉じタグ直前に記述し読み込みさせます。サイトの読み込み時に上から順番に読み込みをする為、scriptが最初の方にあると他の読み込みがすべて停止してしまう場合がある為です。
ページトップに戻るボタンの実装
次にページトップへ戻るボタンを実装していきます。
既にここまでスクロールしていると、画面左下に今回作成しているボタンが表示されているかと思います。表示されているボタンと照らし合わせて見ていただくと分かりやすいと思います。
<button class="pagetop" aria-label="ページトップへ戻る">
<span>PAGE<br>TOP</span>
</button>.pagetop {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 50%;
background-color: #202124;
appearance: none;
outline: none;
cursor: pointer;
position: fixed;
bottom: 20px;
left: 20px;
z-index: 10;
}
.pagetop span {
font-size: 1.0rem;
color: #FFF;
transition: all 0.3s;
}
.pagetop span::before {
content: "";
width: 8px;
height: 8px;
display: block;
margin: 0 auto 2px auto;
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
box-sizing: border-box;
transform: rotate(-45deg);
}
.pagetop:hover span {
transform: translateY(-2px);
}$(function(){
const pageTop = $('.pagetop');
pageTop.hide();
pageTop.click(function(){
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
$(window).on('load scroll', function(){
if ($(this).scrollTop() > 100) {
$('.pagetop').fadeIn();
} else {
$('.pagetop').fadeOut();
}
});完成形は上記のようになります。
以下ではそれぞれのコードについて解説していきます。
HTML
buttonタグにaria-label属性を使用する事で、アクセシビリティ対応をしています。
CSS
今回のCSSのポイントは以下になります。
buttonタグのスタイルの初期化
buttonタグは初期化しないとスタイルがいろいろと付いているので必須になります。
主な初期化は以下のようになります。リセットCSSなどにあらかじめ組み込んでおくと楽になります。
button {
padding: 0;
border: none;
background-color: transparent;
appearance: none;
outline: none;
cursor: pointer;
}spanタグの疑似要素(before)にくの字矢印を実装
疑似要素(before)に、borderで線をつけてtransform: rotate(-45deg);で回転させています。
buttonタグのhover時にspanタグをtransformプロパティで上にずらす
hover時にtransform: translateY(-2px);で上にずらす動作を付けています。
jQuery
$(function(){
const pageTop = $('.pagetop');
pageTop.hide();
pageTop.click(function(){
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});上記は主にボタンクリック時の動作となります。
「500」という数字はクリックされた際にページトップに移動するスピードになります。500で0.5秒となりますので好きなスピードに設定してあげてください。
$(window).on('load scroll', function(){
if ($(this).scrollTop() > 100) {
$('.pagetop').fadeIn();
} else {
$('.pagetop').fadeOut();
}
});上記のコードは、画面読み込み後・スクロール時にページトップから100px以上スクロールしていた場合にページトップへ戻るボタンを表示させる内容となります。
jQueryで最初にpageTop.hide();でページトップへ戻るボタンを非表示にしていますが、読み込み時に一瞬表示されるのが気になる場合はCSSのdisplay: none;で非表示にするようにしてください。
その場合、$(‘.pagetop’).fadeIn();でdisplay: block;になってしまいますので$(‘.pagetop’).fadeIn(300).css(‘display’,’flex’);というふうに変更してあげる必要があります。
さいごに
いかがでしたでしょうか。
今回は、jQueryでページトップに戻るボタンを実装する方法を解説しました。実務でもよく使用するものになりますので覚えておくと便利です。
