ページ内リンクとは、ウェブページ内で特定のセクションや要素に直接移動するための機能です。通常、ページ内リンクはテキストやボタンにリンクを埋め込むことで実現されます。
例えば、ウェブページ上で「トップへ戻る」というリンクをクリックすると、ページの先頭部分にスムーズにスクロールします。
このようなリンクは、長いページや複数のセクションがあるページで特に便利で、ユーザーが迅速に興味のある情報にアクセスできるようにします。JavaScriptを使用してスムーズなスクロール効果を追加することで、ユーザー体験を向上させることができます。
ページ内リンクを作成していく
href属性、id属性で紐づける
<li><a href="#about">会社概要</a></li>←クリック
<h2 id="about">会社概要</h2>←リンク先href属性、id属性で紐づけるだけで、ページ内リンクが完成します。
See the Pen javascrit、ページ内リンクを作成する1 by sho-ta (@sho-ta) on CodePen.
アニメーションをつける
動きが一瞬でわかりづらいので、アニメーションさせます。アニメーションの関数は色々あります。
See the Pen javascrit、ページ内リンクを作成する2 by sho-ta (@sho-ta) on CodePen.
後はよくみかける、TOPに戻るボタンもこれで作れます。下の方にスクロールすると青いボタンが出現しますので、クリックして頂くとTOP、一番上に戻ります。
See the Pen javascript、ページ内リンクを作成する3 by sho-ta (@sho-ta) on CodePen.
スクロール位置を少しずらす
固定ヘッダーを設置している場合や見出しが画面上部にかぶってしまう場合、アンカーリンク先のスクロール位置を少し下にずらすことで、ヘッダーに隠れず綺麗に表示させることができます。具体的には、JavaScriptでリンククリック時のスクロール先座標を算出し、その値にヘッダーの高さや余白分のオフセット値を加減するのが一般的です。
See the Pen javascrit、ページ内リンクを作成する4 by sho-ta (@sho-ta) on CodePen.
スクロール位置を少しずらす、アニメーション
このコードは、アンカーリンクをクリック時に、リンク先要素へスムーズにスクロールするJavaScript実装です。requestAnimationFrameでアニメーションし、easeInOutQuad関数を用いて滑らかな動きを実現。ヘッダーの高さ分オフセットすれば、見出しが隠れないよう工夫できます。
See the Pen javascrit、ページ内リンクを作成する5 by sho-ta (@sho-ta) on CodePen.
コメント