ページ内リンクをスムーズなスクロールで実装したいと思っているあなたのお悩みにお答えします！
目次やその他ページ内にリンクしたい時、一瞬でリンク先まで飛ぶのもいいですが、スムーズなスクロールも捨てがたいですよね。
本記事に載せるコードをコピペすれば、すぐにスムーズスクロールを実装できるので、ぜひお試しください♪
記事でわかること
- ・JavaScriptを使ってスムーズなページ内スクロールを実装する方法
記事の信頼性
筆者のかがみ（@cony_tas）はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。
CONTENTS［ hide ］
スムースなスクロールをJavaScriptで実装してみよう♪
はじめに、このコードをWordPressで運用しているブログに実装したい場合、下記の二つの方法があります。
※その他のWebサイトで実装される方は、ここは飛ばしてください。
- 方法1：子テーマを導入する
- 方法2：記事投稿画面に直接コードをペーストする
もし子テーマを導入して、カスタムCSS・JavaScriptファイルを利用したい場合は、下記の記事の通りに進めていただければ子テーマを導入できますので併せてご覧ください。
記事投稿画面に直接コードをペーストして実装したい方は、このまま読み進めていってくださいね。
実装に必要なコード
それでは、実装に必要なJavaScriptのコードとページ内リンクの設定方法をご説明していきます。
JavaScript
const smoothScroll = function () {
const interval = 10,
divisor = 10,
range = 5,
btn = document.querySelectorAll( 'a[href^="#"]' );
let count = 0;
while ( count < btn.length ) {
( function ( elem ) {
btn[ elem ].addEventListener( 'click', function ( e ) {
e.preventDefault();
let toY,
nowY = window.scrollY || window.pageYOffset;
const href = btn[ elem ].getAttribute( 'href' ),
target = document.querySelector( href ),
targetY = target.getBoundingClientRect().top + nowY;
( function doScroll () {
toY = nowY + ( targetY - nowY ) / divisor;
window.scrollTo( 0, toY );
nowY = toY;
if ( toY >= targetY + range || toY <= targetY - range ) {
setTimeout( doScroll, interval );
}
} ) ();
}, false );
} ) ( count );
count++;
}
}
smoothScroll();
※WordPressの記事投稿画面に直接JavaScriptを追加する際は、下記のscriptタグごと貼り付けてください。
<script>
ここに必要なJavaScriptを追加
</script>
JavaScriptを追加できたら、ページ内リンクを下記のHTMLコードのように設定します。
aタグのリンク先は「#任意のID名」、飛びたい箇所の要素に、aタグで付けたID名と同じ名前のIDを付けてください。
HTML
<a href="#example">ページ内リンク</a>
<div id="example">リンク先</div>
実際の動作
では、実際にスムーズなスクロールになったか試してみましょう！
下記のリンクを押してみてください。この記事の目次までスムーズスクロールするはずです！
↑↑ 目次までスムーズなリンク ↑↑
最後に：スムースなスクロールをJavaScriptで実装してみよう♪
今回はページ内リンクをスムーズにスクロールさせる方法をご紹介しました。
こういったアニメーションはjQueryの出番と思われるかもしれませんが、素のJavaScriptでも問題なく実装できますね♪
今後もちょっと役に立つJavaScriptコードを色々と紹介していこうと思いますので、また遊びにきてください。
それでは、今回はこの辺で！
