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に戻るボタンとスムーズスクロールは必須だとおもいますので、是非使ってみてください。