【Web制作】クリックしたら特定の場所まで移動（スクロール）させる方法

2023年12月24日2024年10月31日

ホームページが縦長の場合、閲覧したい場所に一気にスクロールできるようなボタンなどがあると、ページに訪れた方が閲覧する際にとても便利です。

今回はページ内で特定の場所まで移動（スクロール）できる機能の実装方法について解説いたします。

HTMLとCSSで実装する方法

CSSではクリックした際にスムーズにスクロールされるようプロパティを指定しております。

scroll-behavior: smooth;

html要素に対して指定しているため、ページ全体に適用されております。

一例ですが、このような方法でスクロールさせることも可能です。※aタグは未使用

ただ、HTMLとCSSのみで記載したほうがわかりやすく、実際にはHTMLとCSSで実装される場合が多いです。

注意点として、スクロール先の要素のdisplayプロパティがnoneだった場合、クリックしてもスクロールされません。

display: none;

display: none は要素自体がないものとして扱われるため、認識されません。

HTMLが記述されていないようなイメージです。

aタグでの指定は、idを持つ要素に対してスクロールが発生するため、スルーされてしまいます。

visibility: hidden;

こちらの指定ではHTML要素はあるけれども、非表示としている状態のため、認識されます。

そのため、スクロール先をあらかじめ非表示にしておく必要がある場合は、visibility: hidden を使用すると、aタグでの指定で動作します。

どうしてもWebサイトの仕様上、display: none; を使用しなければならない場合は、JavaScriptで制御しましょう。

ページ内でのスクロール方法について解説させていただきました。

ランディングページ（LP）では、サイトが縦長になりやすく、ページ内スクロールが使用されていることが多いです。

サイト設計を行う上で、縦長になる場合はスクロール機能を追加するなど、ユーザ側にとって閲覧しやすいように作りこんでいきたいですね！