【jQuery】コピペ可 TOPへ戻るボタンの実装とページ内スムーズスクロール

WordPressの有料テーマ購入すると、TOPへ戻るボタンやページ内アンカージャンプでスムーズスクロールするのが普通になっています。

HTMLサイトなどで同じことをする場合どうしたらよいでしょうか？

この記事では、コピペできるjQueryスクリプトとCSSをご紹介します。

この記事で分かること

コピペ可能なTOPへ戻るボタンのHTML
コピペ可能なTOPへ戻るボタンjQueryスクリプト
コピペ可能なTOPへ戻るボタンCSS
まとめ

コピペ可能なTOPへ戻るボタンのHTML

Fontawsome 5を使用しています。必要に応じてhead部でFontawsomeを読み込んでください。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

以下の記述をbodyのどこかに書いてください。場所はどこでも良いです。

<p id="pageTop"><a href="#"><i class="fa fa-chevron-up"></i></a></p>

コピペ可能なTOPへ戻るボタンjQueryスクリプト

HTMLのbodyの後ろの方に書いておいてください。

前半は、アンカージャンプ時のスムーズスクロールのjQueryです。

後半は、TOPへ戻るボタンの表示の制御のjQueryです。

<!-- ＃リンクのスムーズスクロール -->
<script>
$(function(){
var adjust = -125;
if(window.matchMedia("(max-width:991px)").matches){
// 読み込みが完了したときに、991px以下の場合に行いたい処理
adjust = -50;
}
// リサイズ時の関数
function matchFunc(){
if(window.matchMedia("(max-width:991px)").matches){
// windowサイズを変更して、991px以下になったら行うイベント
adjust = -50;
}
if(window.matchMedia("(min-width:992px)").matches){
// windowサイズを変更して、992px以上になったら行うイベント
adjust = -125;
}
}
//リサイズ時のイベントリスナー
window.matchMedia("(max-width:991px)").addListener(matchFunc);
//スムーズスクロール処理
$('a[href^=#]').click(function(){
var speed = 400;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top + adjust;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
//■page topボタン

$(function(){
var topBtn=$('#pageTop');
topBtn.hide();

//◇ボタンの表示設定
$(window).scroll(function(){
if($(this).scrollTop()>80){

//---- 画面を80pxスクロールしたら、ボタンを表示する
topBtn.fadeIn();
}else{

//---- 画面が80pxより上なら、ボタンを表示しない
topBtn.fadeOut();
}
});

});
</script>

コピペ可能なTOPへ戻るボタンCSS

色や形は適当に変えてください。

head部で読み込んでください。外部ファイルに書き込んでもよいし、head部に<script>タグで直書きでもOK。

#pageTop {
position: fixed;
bottom: 20px;
right: 20px;
}

#pageTop i {
padding-top: 6px
}

#pageTop a {
display: block;
z-index: 999;
padding: 8px 0 0 8px;
border-radius: 30px;
width: 35px;
height: 35px;
background-color: #9FD6D2;
color: #fff;
font-weight: bold;
text-decoration: none;
text-align: center;
}
.fa-chevron-up:before {
position: absolute;
top: 30%; left: 39%;
}

#pageTop a:hover {
text-decoration: none;
opacity: 0.7;
}