お問い合わせはコチラから

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

サイト運営

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

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

この記事では、コピペできるjQueryスクリプトと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;
}

まとめ

LPなどでは、TOPに戻るボタンとスムーズスクロールは必須だとおもいますので、是非使ってみてください。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました