【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(){
// #で始まるリンクをクリックしたら実行されます
$('a[href^="#"]').click(function() {
// スクロールの速度
var speed = 500; // ミリ秒で記述
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$('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に戻るボタンとスムーズスクロールは必須だとおもいますので、是非使ってみてください。

 

タイトルとURLをコピーしました