【テクニック】ページトップへ戻るボタンを実装する方法
表示するページによってはコンテンツ量が多くなり、ページが長くなってしまうこともよくあります。
WEBサイトでよく見かける右下にある画面上部、ページトップへ戻るボタン。これが設置されているだけでページ移動がし易くなりますよね。
今回の記事ではページトップへ戻るボタンを実装する方法をご紹介したいと思います。
完成コード
まずは完成コードから見ていきましょう。
以下がページトップへ戻るボタンを実装するためのHTMLコードです。
<div class="pagetop"></div>
以下がページトップへ戻るボタンを実装するためのCSSになります。
CSSに必須な設定は無く、お好みのデザインに調整してください。
.pagetop{
width: 40px;
height: 40px;
right: 10px;
bottom: 10px;
position: fixed;
border: 1px solid #000;
background: #000;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.pagetop::before{
content: "";
display: block;
width: 5px;
height: 5px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(-45deg);
}
ページトップへ戻るボタンを実装するにはjQueryの読み込みが必要になるので以下のように読み込みます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
そして以下がページトップへ戻るボタンを実装するためのjQueryのコードです。
let $pagetop = $('.pagetop');
$pagetop.on('click',function(){
$('html,body').stop().animate({scrollTop:0});
});
このコードをコピペするだけで実装可能です。
以下が実装サンプルです。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
コードの解説
ページトップへ戻るボタンを実装する方法で検索すると10行くらいの長いコードが紹介されていることがよくありますが、最低限のページトップへ戻るボタンを実装するだけであれば以下のコードだけで動作します。
let $pagetop = $('.pagetop');
$pagetop.on('click',function(){
$('html,body').stop().animate({scrollTop:0});
});
<div class="pagetop"></div>
をクリックしたら、画面の上部へスクロールアニメーションしながら戻るというコードが書かれています。
アレンジ
続いて、少しアレンジしたページトップへ戻るボタンのコードをご紹介します。
一定量スクロールしたらボタン表示
画面を表示したはじめはたページトップへ戻るボタンが表示されず、一定量画面を読み進めスクロールしたタイミングでページトップへ戻るボタンが表示されるサンプルです。
サンプルでは100pxスクロールしたタイミングで表示されます。
let $pagetop = $('.pagetop');
/*----- ここを追加 */
$(document).ready(function(){
$pagetop.stop().fadeOut(1);
});
$(window).on('scroll',function(){
if( $(this).scrollTop() > 100 )
{
$pagetop.stop().fadeIn();
}
else
{
$pagetop.stop().fadeOut();
}
});
/*----- ここまで追加 */
$pagetop.on('click',function(){
$('html,body').stop().animate({scrollTop:0});
});
以下が実装サンプルです。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
ボタンを押したら一瞬で上部へ戻る
ページトップへ戻るボタンをクリックしたら画面が消え、再び表示されるとページ上部へ戻っているアニメーションのサンプルです。
let $pagetop = $('.pagetop');
let $html = $('html,body');
$pagetop.on('click',function(){
$html.stop().animate({"opacity":0},function(){
$html.stop().animate({scrollTop:0},1,function(){
$html.stop().animate({"opacity":1});
});
});
});
以下が実装サンプルです。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
まとめ
いかがでしたか?
このように短いコードで簡単にページトップへ戻るボタンは実装することが出来ますね。
最後にもう一度、一番最初にご紹介した完成コードを記載しますのでコピペでご使用ください。
<div class="pagetop"></div>
.pagetop{
width: 40px;
height: 40px;
right: 10px;
bottom: 10px;
position: fixed;
border: 1px solid #000;
background: #000;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.pagetop::before{
content: "";
display: block;
width: 5px;
height: 5px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(-45deg);
}
let $pagetop = $('.pagetop');
$pagetop.on('click',function(){
$('html,body').stop().animate({scrollTop:0});
});