スムースなスクロールをJavaScriptで実装してみよう♪【 ページ内リンク 】

スムーススクロールをJavaScriptで実装してみよう♪ JavaScript
さくらもち
ねえねえ! ページ内リンクって一瞬で目的の場所まで飛べるけど、スムーズにスクロールしたら気持ちよくないかなぁ♪
ウサギさん
スムーズなスクロールかっこいい……♪
モチ
体重が重いモチでもスムーズに飛べるかなっ
ウサギさん
……たぶんむりなの……

ページ内リンクをスムーズなスクロールで実装したいと思っているあなたのお悩みにお答えします!

目次やその他ページ内にリンクしたい時、一瞬でリンク先まで飛ぶのもいいですが、スムーズなスクロールも捨てがたいですよね。

本記事に載せるコードをコピペすれば、すぐにスムーズスクロールを実装できるので、ぜひお試しください♪

 記事でわかること

  • ・JavaScriptを使ってスムーズなページ内スクロールを実装する方法

 記事の信頼性

筆者のかがみ@cony_tas)はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。

スムースなスクロールをJavaScriptで実装してみよう♪

はじめに、このコードをWordPressで運用しているブログに実装したい場合、下記の二つの方法があります。
※その他のWebサイトで実装される方は、ここは飛ばしてください。

  • 方法1:子テーマを導入する
  • 方法2:記事投稿画面に直接コードをペーストする

もし子テーマを導入して、カスタムCSS・JavaScriptファイルを利用したい場合は、下記の記事の通りに進めていただければ子テーマを導入できますので併せてご覧ください。

WordPressに子テーマを追加してCSSでカスタマイズしてみよう!

2020年2月21日

WordPressの子テーマからJavaScriptファイルを読み込む方法

2020年2月23日

記事投稿画面に直接コードをペーストして実装したい方は、このまま読み進めていってくださいね。

実装に必要なコード

それでは、実装に必要な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コードを色々と紹介していこうと思いますので、また遊びにきてください。

それでは、今回はこの辺で!

JavaScriptでスクロールした時にふわっと表示♪

JavaScriptでスクロール時にイベントを実装してみよう!【ふわっと表示】

2020年3月13日
さくらもち
いつもCony-Tasに遊びにきてくれてありがと~♪