・スムーススクロールの実装方法を知りたい。
・色んな実装方法があるがどれが良いのか知りたい。
・そもそもスムーススクロールとは何か知りたい。
こんな疑問や悩みに答えます。
スムーススクロールの実装方法は、CSS、jQuery、JavaScriptの3つの実装方法があります。
今回は、それぞれ3つの実装方法を紹介し、どの実装が一番良いのかをまとめてみました。
このブログ「とらまるブログ」の運営者。2019年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログ情報発信を行っている。これまでのWeb制作実績は60件以上。
スムーススクロールとは
スムーススクロールとは、ボタンや目次などをクリックした際、同じページ内の別の位置に移動するときに、滑らかな挙動でスクロールさせる実装方法のことです。
以下にデモの実装を用意しました。上部のセクションボタンをそれぞれクリックすると、滑らかにそれぞれのセクションにスクロールすることを確認してみてください。
See the Pen Untitled by 森寅治 (@moritoraji) on CodePen.
ページ内リンクの実装方法(スムーススクロールなし)
スムーススクロールなしの場合の挙動は以下になります。
ボタンを押すと、遷移先に瞬時に飛びます。
See the Pen Untitled by 森寅治 (@moritoraji) on CodePen.
スムーススクロールの実装の前に、ページ内リンクの実装をどのように行うか説明しておこうと思います。
遷移させてたいタグにidを付与し、aタグのhrefで# + id名とすることで、遷移先に飛ばすことができます。
以下がhtmlでの実装手順になります。
<ul>
<li><a href="#sec1">セクション1</a></li>
<li><a href="#sec2">セクション2</a></li>
<li><a href="#sec3">セクション3</a></li>
</ul>
<section class="sec1" id="sec1">
セクション1
</section>
<section class="sec2" id="sec2">
セクション2
</section>
<section class="sec3" id="sec3">
セクション3
</section>
スムーススクロール実装3選
では、ここからスムーススクロールの実装方法について3つ紹介していきたいと思います。
デモがありますので、それぞれコピペで自由にカスタマイズしてください。
CSSの実装方法
実装方法の中で一番簡単なのは、CSSで実装する方法です。
以下デモになります。
See the Pen Untitled by 森寅治 (@moritoraji) on CodePen.
コード記述は、CSSファイルに以下を記述で完了です!
html {
scroll-behavior: smooth;
}
jQueryの実装方法
次にjQueryの実装方法になります。
以下デモになります。
See the Pen Untitled by 森寅治 (@moritoraji) on CodePen.
コード記述は、以下になります。
HTMLは、jQuery読み込む必要があるので</body>の前に以下をコピペをしてください。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
JavaScriptファイルの記述は、以下になります。
jQueryでの実装は、スクロールスピードの調整をspeed変数で行えます。
$(function(){
$('a[href^="#"]').click(function(){
var adjust = 0;
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;
});
});
JavaScriptの実装方法
最後にJavaScriptでの実装方法になります。
以下デモになります。
See the Pen Untitled by 森寅治 (@moritoraji) on CodePen.
JavaScriptファイルの記述は、以下になります。
jQueryのようなスピード調整はできません。
スピード調整をするには、ライブラリ使用すれば簡単にできると思います。
// ページ内スクール
const smoothScrollTrigger = document.querySelectorAll('a[href^="#"]');
for (let i = 0; i < smoothScrollTrigger.length; i++){
smoothScrollTrigger[i].addEventListener('click', (e) => {
e.preventDefault();
let href = smoothScrollTrigger[i].getAttribute('href');
let targetElement = document.getElementById(href.replace('#', ''));
const rect = targetElement.getBoundingClientRect().top;
const offset = window.pageYOffset;
const width = window.outerWidth;
const target = (rect) + offset;
const targetSp = (rect) + offset;
if (width <= 768) {
window.scrollTo({
top: targetSp,
behavior: 'smooth',
});
} else {
window.scrollTo({
top: target,
behavior: 'smooth',
});
}
});
}
実装比較
ここでは、それぞれの実装のメリット、デメリットを比較してみたいと思います。
結論を先に言いますと、基本的にCSSの実装方法で行えばいいと思います。
カスタマイズが必要であれば、JavaScript、jQueryの実装に変えれば良いと思います。
CSS実装のメリットデメリット
jQuery実装のメリットデメリット
JavaScript実装のメリットデメリット
まとめ
今回の記事では、スムーススクロールの実装方法をまとめてみました。
フロントエンドの開発では、ファイル容量はできるだけ少なく、ページスピードなどを意識したコーディングをすることが大事です。
だからこそ、一つずつ検討してどの方法が良いのか考える習慣はとても大切だと思います。
皆さんもただ、コードをコピペするだけでなく、一度この実装で良いのか疑いをもって色んな方法を検討してみると良いと思います。
コメント