今回は以下のようなトップへ戻るボタンの作成の仕方をわかりやすく説明します。また基本全てコピペで使えますので是非活用して下さい。
トップへ戻るボタンの作り方
今回紹介する方法はjQueryを使った方法です。
まずはjQueryの読み込みをして下さい。分からない方は以下のページを参考にして作業して下さい。
jQueryの読み込みが完了したら、フッターの一番下あたりに以下のようにHTMLでマークアップしておきます。
HTML
<a href="" class="d-none" id="page-top">TOP</a>ここで重要なのは、あとで説明しますが、非表示用のクラス（class=”d-none”）とトップに戻るボタン用のID（id=”page-top”）をしっかり記述しておく事です。class=”d-none”には「display:none;」のスタイルを当てて非表示にしておきます。
続いてはJavaScriptファイルに以下の記述を追加します。
JavaScript
// TOPに戻るボタン
var pagetop = $('#page-top');
pagetop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 300) { //300pxスクロールしたら表示
pagetop.fadeIn(); //ふわっと出てくる
} else {
pagetop.fadeOut(); //ふわっと無くなる
}
});
pagetop.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500); //0.5秒かけてトップへ移動
return false;
});
$(document).ready(function(){
$(window).scroll(function() {
if($(this).scrollTop() > 250) { //250pxスクロールしたら表示d-noneを外す
$("#page-top").removeClass("d-none");
}
});
});初めの2行目に記述されているvar pagetop = $(‘#page-top’);の記述で先程のHTMLで記載した「#page-top」をトップへ戻るボタンにしてくれています。厳密には11行目のpagetop.click(function ()がボタンにしてくれてます。
デフォルトの状態ではd-noneがあるので非表示です。そして、初めの10行目までの記述で、どこまでスクロールしたらトップへ戻るボタンが表示されるかを書いています。11行目から16行目ではトップへ戻るボタンを押した時の挙動を書いています。
これだけではd-noneのクラスが残ってしまい表示されません。なので17行目からの記述で250pxスクロールしたらd-noneを外す処理を加えています。また、この処理では250pxスクロールされていない場合はd-noneが付くという処理にもなっています。
CSS
.d-none {
display:none;
}
#page-top {
position: fixed;
right: 15px;
bottom: 20px;
height: 50px;
text-decoration: none;
font-weight: bold;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
font-size: 90%;
line-height: 1.5rem;
color: #f38200;
padding: 0 0 0 35px;
border-top: solid 2px;
}
#page-top::before {
content: "";
display: block;
position: absolute;
top: -2px;
left: 1px;
width: 15px;
border-top: solid 2px;
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
-webkit-transform-origin: left top;
transform-origin: left top;
}
#page-top a {
font-size: 1em;
}CSSでは、d-noneのクラスにdisplay:none;を付け忘れないようにしましょう。（Bootstrapを使っている方はd-noneとすればデフォルトでdisplay:none;のスタイルが当てられています。）
あとはposition: fixed;で配置を固定したり、その他色調整や装飾を付けて完成です。
実際の挙動はこんな感じです。
以上が「【jQuery】トップへ戻るボタンをコピペで超簡単に作成!!」でした。
同じデザインで良ければ全てコピペで可能です。理解できない点があればコメントなど頂ければ可能な限りお答えします。
