【初心者でもわかる】ページ読み込み時に任意の位置までスクロールした状態にする方法

どうも7noteです。ページを読みこんだら一番上でなくページの途中を最初に表示する方法です。

ページ遷移をするときに、特定のリンクからはページの途中を表示させることができます。
指定も1行で簡単。

ページの途中から表示させる方法

例）「index.html」から「hogehoge.html」の途中へリンクさせる

index.html

<a href="hogehoge.html#contentsC" >ページhogehogeのコンテンツCへリンクする</a>

hogehoge.html

<div id="contentsA">コンテンツA</div>
<div id="contentsB">コンテンツB</div>
<div id="contentsC">コンテンツC</div>
<div id="contentsD">コンテンツD</div>
<div id="contentsE">コンテンツE</div>

解説・ポイント

とび元（ページ遷移する前のページ）のリンクのURLの最後に【#(id名)】を指定し、
とび先のページにそのidを指定した要素（最初に表示させたい要素）を用意するだけ。

ピッタリ上にくっついてしまうので、それを避ける場合にはjavascriptなどで制御する方法があります。

まとめ

classではできず、idでしかできませんのでご注意を。
同一ページ内でも移動させることが可能です。指定方法は一緒。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ