こんにちは、テルプロです！
本記事では「JavaScriptでページ内リンク移動を実装する方法」をご紹介します。
コピペOKですのでご自由にお使いください！
本記事を読むことで
- JavaScriptでページ内リンク移動を実装する方法がわかる
- コピペですぐに実装できる
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サイト制作を心がけましょう！
JavaScriptの実践的なスキルを身につけたい方には「Udemy」がおすすめです。オンラインコースの数は10万以上。世界で4000万人以上の人が学習に利用しています。
▼以下では、口コミをもとに厳選した「JavaScriptデザイン学習におすすめのUdemy講座3選」をご紹介しています。ぜひ参考にしてみてください！
最後まで記事をご覧いただきありがとうございました。ではまた！
