ページ内リンクをスムーズに移動してくれるスムーススクロール。
Webページを下へスクロールしていくと右側（大体）にでてくる、ページトップにスクロールして戻るアイコンもスムーススクロールで設定！
良いサイトを見つけたので、手順を踏まえて紹介していきます！
スムーススクロールについて
スムーススクロールとは、ページ内リンクを移動する際の動きで
リンクをクリックした際に、アンカーポイント(指定された場所)までさら〜っと表示しながら飛ばしてくれます。
今回は、それを利用した【TOP へ戻る】アイコンまでの手順も含めて説明していきます。
導入手順
Step1: CDN経由でjQueryを読み込む
CDN経由(contents delivery network)でjQueryを読み込む場合の流れです。
jQuery公式のCDNやGoogleのCDN等、色々ありますがGoogleのCDN経由で進めていきます。
CDNとは、インターネット上に置かれたファイルを利用できる仕組みのこと
CDN経由ではなく、直接ファイルを利用したい場合▶︎ jQuery公式へ
GoogleのCDN
<head>タグ内に、Googleが提供しているjQueryファイルの読込みコードを記述します。
すでに記述済みの場合は不要です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>jQueryのバージョンは各自、数値のところを変更してください。上記は最新ver.になっています。
Google Hosted Librariesで、コードやバージョンの確認が可能です。
Step2: smooth-scrollファイルの設置
スムーススクロール用.jsを作成します。
ローカルサイトフォルダにJsフォルダを作成し、smooth-scroll.jsを設置。
Step3: HTMLにsmooth-scroll.jsを記述
ファイルを設置したら読み込むため、ソースコードに記述します。
<head>タグ内に記述するか、あるいは</body>の前に記述。
先に読み込んだjQueryの後に書きます。
<script src="js/smooth-scroll.js"></script>Step4: 上に戻るボタン記述
</footer>の後に<p>タグで、【top】に戻るボタン記述。
<p class="back-top scroll-fade"><a href="#top">トップへ</a></p>ここで付けた<p>タグのクラス名【back-top】はCSSでいじっていきます。
<a>タグに挟まれた「トップへ」の部分を画像やSVGに変更してお好みにできます。
【scroll-fade】はjsで使用。
【back-top】のCSS
/*----- スムーズスクロール -----*/
.back-top {
position: fixed; /* 要素固定*/
bottom: 3%; /*下からの位置*/
right: 5%; /*右からの位置*/
display: none; /*初めは非表示*/
width: 80px;
height: 80px;
background-color: #FCBC06;
border-radius: 100%;
}
.back-top a{
color: #fff;
text-decoration: none;
text-align: center;
display: block;
line-height: 80px;
}Step5: jsにコード記述
Step:2 で作成したsmooth-scroll.jsに以下コピペ。
// JavaScript Document
(function($) {
'use strict';
$(function() {
var scrollSpeed = 1000, // スクロール時間（ミリ秒）数字が小さいと早くなる
buttonOffset = 200; // トップへ戻る固定ボタンを表示するスクロール量（px）
// スムーズスクロール
$('a[href^="#"]').on( 'click', function() {
var href= $(this).attr( 'href' );
if ( href !== '#' || href !== '' ) {
var target = ( href === '#top' && !$('#top').length ) ? 'html' : href,
position = $(target).offset().top;
$('body, html').animate( {scrollTop:position}, scrollSpeed, 'swing' );
return false;
}
});
// トップへ戻る固定ボタンの表示・非表示
if ( $('.scroll-fade').length ) { // トップへ戻る固定ボタンを表示するスクロール量（px）
var sfBtn = $('.scroll-fade'),
sfBtnDisplay = '',
flagAnimate = false;
$(sfBtn).css( 'display', 'none' );
$(window).on( 'scroll', function() {
sfBtnDisplay = sfBtn.css( 'display' );
if ( $(this).scrollTop() > buttonOffset && sfBtnDisplay === 'none' && !flagAnimate ) {
flagAnimate = true;
sfBtn.fadeIn(function() {
flagAnimate = false;
});
} else if ( $(this).scrollTop() <= buttonOffset && sfBtnDisplay !== 'none' && !flagAnimate ) {
flagAnimate = true;
sfBtn.fadeOut(function() {
flagAnimate = false;
});
}
});
}
});
})( jQuery );このプラグインは、時にはWEBの話っ！の運営者さんが配布されています。
使いやすいので紹介させていただきました。ありがとうございます！
JavaScript分かんなくても出来る方の配布のおかげでサイトは作れるのだ！！
これでスムーズスクロール実装完了です！
実装方法いろいろ
今回は、分かりやすく応用も効きそうな実装方法を参考に紹介しましたが実装方法は色々あります。
jsファイルを取得、もしくはCDN経由で読み込んでソースコードに直接記述もOK。
githubやjQuery公式サイトで配布されています。
