【コーディング 備忘録】htmlだけでページ内 スクロール

こんにちはrey( @reydesign8376) です

ページ内リンク、ボタンやセクションを押すと同じページ内の指定したセクションにジャンプする方法をサクッと備忘録していきます。では早速〜

目次

ページ内リンクとは?

ページ内のセクションに飛ぶようにするリンク設定のこと
アンカーリンクが正式名称です。

通常のリンク記述をページ内でも行えるようにできちゃいます。

通常リンクの記述
<a href=”URL”>リンクテキスト</a>

制作手順

STEP
クリックするセクションを作成(出発点)を作成
STEP
ジャンプさせたいセクション(到達点)を作成

以上です!
次にコードを見ていきます

html記述

出発点(クリックするセクション)につける記述

<a href="#アンカー名">リンクテキスト</a>

出発点のアンカー名の前には「#」をつけます。アンカー名は自由につけられますが、
同じ名前になるとどちらに飛んでいいのか分からなくなるので、同じページ内で同じアンカー名は使えません。

到達点(ジャンプ先セクション)につける記述

<a href=”#アンカー名”>と
<a name>や<要素 id>で指定したアンカー名とを紐付けると
ページ内リンク完成になります。

<a name="アンカー名">テキスト</a>

要素、divやh2見出しなど

<要素 id="アンカー名">テキスト</要素>

ページ内リンクはhtmlだけでOKです。スクロールの動きの変化はjQueryなどで調整をしていきます。
プレーンな動きはパッと移る感じになります。

WordPressによるページ内リンク

WordPressでもページ内リンクは可能です
やり方はこちら!とっても簡単

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次