最近のホームページはページをスクロールすると右下にページトップに戻るボタンが出てくるのが当たり前になっていますよね。ここでは、このボタンの作り方について見ていきたいと思います。「ページトップに戻る」ボタンを作るには、HTMLとCSSでボタンを作る工程と、jQueryを使って動きを実装させる工程の２つがあります。それでは順番に見ていきましょう。
コンテンツ
ページトップへ戻るボタンの作成
最初に、ボタンの作成から見ていきましょう。ボタンは、右下に固定されるようにposition: fixed;で設定します。いくつかボタンをデザインしてみましたので、下記の中から気に入ったものをコピペしてご利用ください。色とかサイズとか細かい調整はいろいろ工夫してみてくださいね。
ちなみに、下記ではアイコンフォントとして「Font Awesome」というサービスを利用しています。これらのアイコンを使用するためには、head要素の中に下記のコードを入れる必要があります。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
「Font Awesome」の詳細については下記をご参照ください。
「トップへ戻る」ボタンのデザイン15パターン
ボタンで表示を切り替えてご覧ください。
See the Pen PAGE TOP BUTTON01 by kenichi (@ken81) on CodePen.
See the Pen PAGE TOP BUTTON02 by kenichi (@ken81) on CodePen.
See the Pen PAGE TOP BUTTON03 by kenichi (@ken81) on CodePen.
See the Pen PAGE TOP BUTTON04 by kenichi (@ken81) on CodePen.
See the Pen PAGE TOP BUTTON05 by kenichi (@ken81) on CodePen.
See the Pen PAGE TOP BUTTON06 by kenichi (@ken81) on CodePen.
See the Pen PAGE TOP BUTTON07 by kenichi (@ken81) on CodePen.
See the Pen PAGE TOP BUTTON08 by kenichi (@ken81) on CodePen.
See the Pen PAGE TOP BUTTON09 by kenichi (@ken81) on CodePen.
See the Pen PAGE TOP BUTTON10 by kenichi (@ken81) on CodePen.
See the Pen PAGE TOP BUTTON11 by kenichi (@ken81) on CodePen.
See the Pen PAGE TOP BUTTON12 by kenichi (@ken81) on CodePen.
See the Pen PAGE TOP BUTTON13 by kenichi (@ken81) on CodePen.
See the Pen PAGE TOP BUTTON14 by kenichi (@ken81) on CodePen.
See the Pen PAGE TOP BUTTON15 by kenichi (@ken81) on CodePen.
上記のボタンは、設置するだけでも機能はしてくれるのですが、せっかく作るならページを少しスクロールすると出てきて、ボタンをクリックすると、スーッとトップへ戻りボタンがスッと消えるようにしたいじゃないですか。それを実装するためにjQueryを使います。
上記のボタンたちはすべて「page_top」というid名が付けられています。このid名に対してjQueryで関数を設定するのですが、その下準備として、head要素内でjQueryを読み込ませる必要があります。WordPressの場合はjQueryが最初から読み込まれていますが、必要な場合は下記のコードを<head>～</head>にコピペしてください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
jQueryでボタンの動きを設定
ここでは３つのパターンとjQueryのコードをご紹介します。実際にスクロールして動きも確認してみてください。
ボタンで表示を切り替えてご覧ください。
下から出てくるボタン
See the Pen PAGE TOP BUTTON0 JS02 by kenichi (@ken81) on CodePen.
jQuery(function() {
var appear = false;
var pagetop = $('#page_top');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) { //100pxスクロールしたら
if (appear == false) {
appear = true;
pagetop.stop().animate({
'bottom': '50px' //下から50pxの位置に
}, 300); //0.3秒かけて現れる
}
} else {
if (appear) {
appear = false;
pagetop.stop().animate({
'bottom': '-50px' //下から-50pxの位置に
}, 300); //0.3秒かけて隠れる
}
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500); //0.5秒かけてトップへ戻る
return false;
});
});
横から出てくるボタン
See the Pen PAGE TOP BUTTON0 JS03 by kenichi (@ken81) on CodePen.
jQuery(function() {
var appear = false;
var pagetop = $('#page_top');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) { //100pxスクロールしたら
if (appear == false) {
appear = true;
pagetop.stop().animate({
'right': '0px' //右から0pxの位置に
}, 300); //0.3秒かけて現れる
}
} else {
if (appear) {
appear = false;
pagetop.stop().animate({
'right': '-50px' //右から-50pxの位置に
}, 300); //0.3秒かけて隠れる
}
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500); //0.5秒かけてトップへ戻る
return false;
});
});
フェイドして現れるボタン
See the Pen PAGE TOP BUTTON0 JS01 by kenichi (@ken81) on CodePen.
jQuery(function() {
var pagetop = $('#page_top');
pagetop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) { //100pxスクロールしたら表示
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500); //0.5秒かけてトップへ移動
return false;
});
});
それぞれの細かい調整はソースコードにコメントしてありますので、自分のページに合うように調整してみてくださいね。
ところで、下記のようにトップへ戻るボタンだけでなく、ページ内リンクもスムーズに移動させたいと思いませんか？（「クリック」の部分をクリックしてみてください）
See the Pen PAGE TOP BUTTON0 JS04 by kenichi (@ken81) on CodePen.
そういう場合は、下記のようにソースコードをしてみてください。↓これはボタンがフェードするバージョンです。
jQuery(function() {
var pagetop = $('#page_top');
pagetop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) { //100pxスクロールしたら表示
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
$('a[href^="#"]').click(function(){
var time = 500;
var href= $(this).attr("href");
var target = $(href == "#" ? 'html' : href);
var distance = target.offset().top;
$("html, body").animate({scrollTop:distance}, time, "swing");
return false;
});
});
変更点としては、下記の部分を入れ替えます。
変更前
pagetop.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500); //0.5秒かけてトップへ移動
return false;
});
変更後
$('a[href^="#"]').click(function(){
var time = 500;
var href= $(this).attr("href");
var target = $(href == "#" ? 'html' : href);
var distance = target.offset().top;
$("html, body").animate({scrollTop:distance}, time, "swing");
return false;
});
ページ内リンクをスムーズにする仕組みついてご興味がある方は、下記の記事で詳しくお話していますので、良かったら参考にしてみてください。
以上がスクロールすると出てくる「トップへ戻る」ボタンの作り方でした。
