CSSとJavaScriptでの設定方法

ページ内リンクとは、同じページ内の特定部分にジャンプ(移動)するリンクのことです。

aタグのhref属性には”#1″、ジャンプ先の特定部分にはid=”1″というように設定します。つまり、href属性の#(シャープ)以降の文字列と、特定部分のidの文字列を完全一致させることでページ内リンクをつくることができます。コンテンツの多いWebページには必須の動作だと言えるでしょう。

設定するファイルはHTMLだけです。ただし、HTMLだけでは一瞬でジャンプするのみでスムーススクロールの挙動が起こりません。スムーススクロールさせるにはCSSもしくはJavaScriptで設定する必要があります。

実際にどうやるのか。CSSから説明していきます。と言ってもCSSは説明するほどではありません。なぜなら一行で終わるからです。htmlタグに、scroll-behavior: smooth;を設定するだけです。

1. html {
2.   scroll-behavior: smooth;
3. }

以上です。

あれ？あっさりしすぎじゃない？

なんだか簡単すぎて不安になるレベル…。

で、やはりその不安は的中。以下のような問題があり、あまりオススメできません。

• Safariに対応していない
• 全てのページ内リンクがスムーススクロールになる
• 細かい調整ができないためスクロール位置がズレる
• などなど

ですので、JavaScriptで設定するのが良いです。jQueryを使用する例はネットでたくさん検索ヒットするので、今回は生のJavaScriptのみを使用する場合で説明します。ちょっとだけ複雑になりますが、それでも難しいという内容ではありません。むしろ簡単な部類です。

ざっくりした内容は下記の通り。

• 目次(aタグ)をクリック
• ↓
• 該当する見出し(h2)の位置を取得
• ↓
• scrollTo()メソッドで取得した見出しの位置までページをスクロール

コードは以下のようになります。

1. function scrollToHeading() {
2.   const a_all = document.querySelectorAll('a[href^="#"]');
4.   a_all.forEach((a,index) => {
5.     a.addEventListener('click', e => {
6.       e.preventDefault();
7.       
8.       const h2_all = document.querySelectorAll('h2');
9.       const h2_positionY = Math.floor(h2_all[index].getBoundingClientRect().top + window.scrollY);
10.       
11.       window.scrollTo({
12.         behavior:'smooth',
13.         top: h2_positionY,
14.         left: 0,
15.       });
16.     });
17.   });
18. }
19. window.addEventListener('DOMContentLoaded', () => {
20.   scrollToHeading();
21. });

以下、解説です。

1. const a_all = document.querySelectorAll('a[href^="#"]');

href属性が‘#’で始まる全部のa要素を取得。

1. a_all.forEach((a,index) => {
2.   a.addEventListener('click', e => {
3.     e.preventDefault();

取得した全部のa要素にクリックイベントを設定し、取得した全部のa要素にデフォルトで設定されているイベントを全て無効化。

1. const h2_all = document.querySelectorAll('h2');
2. const h2_positionY = Math.floor(h2_all[index].getBoundingClientRect().top + window.scrollY);

リンク先となるh2全てを取得。h2は配列になっていて、h2_all[index]とすることで、aのインデックスとh2のインデックスを同期できます。indexはいつ取得したのかというと、foreachを使った際、2番目の引数で取得しました。foreachは3番目まで引数を指定できるので、覚えておきましょう。そうして取得した全てのh2のページトップからのY座標をh2_positionYに入れておきます。

1. window.scrollTo({
2.   behavior:'smooth',
3.   top: h2_positionY,
4.   left: 0,
5. });

scrollToメソッドを使い、h2_positionYの位置(h2の位置)までスクロールするように設定。スクロールの振る舞いはスムースにしておく(behavior: smooth;の部分)。

1. window.addEventListener('DOMContentLoaded', () => {
2.   scrollToHeading();
3. });

Webページには挿絵として画像リソースを入れる場合が多々あります。その際、そのリソースが読み込まれる前にブラウザがスクロールを始めると、ブラウザは画像の高さを計算せずにスクロールすることになるので位置がズレてしまいます。それを防ぐためにDOMContentLoadedで先にリソースが読み込んでおきます。デモページを作ったので、良かったら下記リンクからご覧ください。以上でJavaScriptでの設定は終了です。

スムーススクロールが効かないブラウザへの対応

CSSのscroll-behaviorプロパティ、JavaScriptのscrollToメソッド。どちらも大変便利なのですが、ブラウザによってはサポートしていません。以下、サポート状況です。

Safariのサポート状況がイマイチなのが残念ですね。Safariがサポートされるまで待つ、というのも一つの手ですが、Polyfillを使えば解決できます。

Polyfill (ポリフィル) – MDN Web Docs 用語集

色々なPolyfillがありますので、ご自身で調べてみてください。今回はこちらのPolyfillをご紹介します。

https://www.npmjs.com/package/scroll-behavior-polyfill

npmかyarnを使ってダウンロードします。npmやyarnの説明は今回は割愛しますね。

このPolyfillの開発者の説明ではダウンロード後、JSファイルにimportするだけで良いとのことなんですが、importしても正常に動かなかったので、index.jsを直接読み込みました。すると、Safariでも動くようになりました。けど、Chromeと比較すると、スクロールスピードが微妙に違う…。まぁ、そのくらいは良しとしますかね…。