JavaScript

【JavaScript】ページ内リンク移動!コピペで出来るスムーススクロール

こんにちは、アプリ開発者のテルです!

本記事では「JavaScriptでページ内リンク移動を実装する方法」をご紹介します。

テル

コピペOKですのでご自由にお使いください!

本記事を読むメリット
  1. JavaScriptでページ内リンク移動を実装する方法がわかる
  2. コピペですぐに実装できる

JavaScriptでページ内リンク移動を実装する方法

テンプレート

こちらが今回ご紹介するスムーススクロールのテンプレートです。

ResultのOne/Two/Three/Four/Fiveを押して動きを確かめて見てください。

See the Pen Untitled by terupro (@terupro) on CodePen.

ヘッダーの高さに応じて調整したい場合

サイトによって、ヘッダーの高さは異なります。ヘッダーに要素が重なったり、離れていたりする場合は下記のコードの数値を変更してください。

const gap = 60;

こちらのコードの「60」はヘッダーの高さを表しています。

そのため・・・

  • ヘッダーの高さが「120」の場合・・・「120」に変更する
  • ヘッダーの高さが「50」の場合・・・「50」に変更する

このように調整することで、ヘッダーの高さに対応できます。

「移動先の要素の上に少し余白を用意したいなぁ」というときは「ヘッダー+余白」の数値に変更すれば対応できます!

まとめ

今回は「JavaScriptを使ったページ内リンク移動のやり方」を解説しました。

スムーススクロールは現代のWebサイトに欠かせない存在となりました。移動時にカクカク動いてしまうとユーザーにとって心地の良いものではないとされているためです。

JavaScriptを使ってユーザーにとって、より見やすく使いやすいWebサイト制作を心がけましょう!

最後まで記事をご覧いただきありがとうございました。ではまた!

Flutter関連の書籍を出版しました!