・ページ内リンクをスムーススクロールさせるにはどう実装するの？
こんな疑問にお答えします。
スムーススクロールとは、ページ内リンクをクリックした時に、スムーズにススーッと動くやつです。
いきなりリンク先に飛ぶよりかは、見ため的に良いかと。
こんな感じのやつですね↓
これ実は簡単に実装できちゃいます。
すぐにできるよ！
ということで、この記事では「ページ内リンクのスムーススクロール作り方」について解説していきます！
・ページ内リンクのスムーススクロール作り方【jQuery】
・ページ内リンクのスムーススクロール作り方【CSS】
目次
【jQuery】ページ内リンクのスムーススクロール作り方【コピペOK】
まずjQueryを利用したスムーススクロールの紹介をしていきます。
サンプルを作りましたのでご覧ください！
See the Pen ➀スムーススクロール by jito-coder (@jito-coder) on CodePen.
<!-- ヘッダー -->
<header class="l-header">
<nav>
<ul>
<li><a href="#about">about</a></li>
<li><a href="#news">news</a></li>
<li><a href="#works">works</a></li>
<li><a href="#company">company</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</nav>
</header>
<!-- セクション部分 -->
<main class="main">
<section class="test01" id="about">about</section>
<section class="test02" id="news">news</section>
<section class="test03" id="works">works</section>
<section class="test04" id="company">company</section>
<section class="test05" id="contact">contact</section>
</main>$(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;
});
});内部リンクをクリックしたら、良い感じにススーと動きますよね！
このコードの中で重要な点がこちら↓
- 内部リンク先とid部分を一致させる
- 内部リンク先に対してのスクロール方法を記述
順に見てきましょう！
内部リンク先に飛ぶために、リンク先とid部分を一致させましょう。これはスムーススクロールじゃなくても、内部リンクでは必要な部分ですね。
下記のように「#about」の内部リンク先に対して、「id=”about」というように一致するようにします。
<!-- 内部リンク -->
<ul>
<li><a href="#about">about</a></li>
<li><a href="#news">news</a></li>
<li><a href="#works">works</a></li>
<li><a href="#company">company</a></li>
<li><a href="#contact">contact</a></li>
</ul>
<!-- 内部リンク先 -->
<section class="test01" id="about"></section>
<section class="test02" id="news"></section>
<section class="test03" id="works"></section>
<section class="test04" id="company"></section>
<section class="test05" id="contact"></section>あとはjQueryにてスムーススクロールさせるような設定を記述すれば実装可能。
やり方は下記コードですね。
$(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;
});
});初めて見た人からしたら、わけがわかないかと思います。。（僕もそうだった）
ただ理解すれば結構簡単です。
このコードをめちゃくちゃ簡単に説明すると
「クリックしたhref属性の、#の値と位置を変数に入れて、その位置までswingスピードで0.5秒かけて移動する」
という意味。
細かい点の意味は、下記の説明らをどうぞ↓
$('a[href^="#"]').clickhref属性に「#」がついてるaタグをクリックした時に、という意味。
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;- speed = 500ミリ秒（0.5秒）
- href ＝クリックしたhref属性の中身を取得（#部分を取得）
- target ＝hrefの値が「#」or「空白」ならhtmlが代入。それ以外ならhrefの値が代入。
- position＝ドキュメント左上の位置からtarget値までの距離
$('body,html').animate({scrollTop:position}, speed, 'swing');「body,html」全体に対して、変数positionの値まで、「swing」の設定スピードでリンク先に移動する。という意味
bodyとhtml両方設定する理由は、
ブラウザによってどちらかが対応していないため！
return false;要はイベントを止めるという意味。
今回のコード例では、この中断作業によりURL部分にidタグが入らないようになります。
【jQuery】ページ内リンクのスムーススクロール作り方【header分位置をずらす】
スムーススクロールするときに、位置を少しずらす方法を紹介します。
例えばですがheaderが固定されている場合、その固定された縦幅分を引いた位置にリンク移動したいですよね。
その場合のサンプルがこちら↓
See the Pen ➀スムーススクロール by jito-coder (@jito-coder) on CodePen.
固定されているheaderの縦幅分を引いた位置に、スムーススクロールされているのが分かるかと思います！
$(function(){
$('a[href^="#"]').click(function(){
var headerH = $('.l-header').innerHeight();
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top - headerH;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});「headerH」という変数に、ヘッダーの縦幅数値を代入しています。
そして移動先のリンクの位置を、その変数分マイナス。
これだけで固定headerの縦幅分ずらして、スムーススクロールする実装ができますよ。
【CSS】ページ内リンクのスムーススクロール作り方【コピペOK】
最後にjQueryを使わずに、CSSのみでスムーススクロールを作る方法を紹介します。
実はたった1行で実装可能なんですよね。とはいえ注意点もあるのが事実。。
そんなサンプルがこちら↓
See the Pen ➁スムーススクロール by jito-coder (@jito-coder) on CodePen.
ススーと内部リンク先まで移動していますよね！CSSのみです！
html {
scroll-behavior: smooth;
}上記のコードを追加するだけで、スムーススクロールが実装可能です。
jQueryの時も紹介しましたが、headerが固定されている場合、スクロール位置をずらしたいですよね。
そんな時もCSSではたった1行で実装可能。
それがこちらのコード↓
html {
scroll-padding-top: 50px;
}scroll-padding-topを使えば、スクロール位置をずらすことができます。
たった1行で実装可能なので楽ですが、CSSのみでスムーススクロールを実装するのは注意点が多くあります。
それが下記↓
- URLにid名がつく
- スクロールスピードの調整ができない
- safariの古いバージョンだと対応してない
- 全ページ内リンクがスムーススクロールになる
色々と不備な点もあるので、どちらかというとjQueryにて実装するのが僕的にはオススメですね。
jQueryは使いたくない、楽に実装したい、特に細かい調整はいらない、という人は「scroll-behavior」で実装してみてはいかがでしょうか。
【CSS・jQuery】ページ内リンクのスムーススクロール作り方【コピペOK】：まとめ
- 内部リンク先とid部分を一致させる
- 内部リンク先に対してのスクロール方法を記述
- 位置をずらしたい場合、header位置を変数に代入して引く
- 「scroll-behavior」を使えば、CSSのみでスムーススクロール可能
- 「scroll-padding-top」を使えば、CSSのみでスクロール位置ずらせる
スムーススクロールはよく使うので覚えておこう！
