こんにちは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でもページ内リンクは可能です
やり方はこちら！とっても簡単
あわせて読みたい
【WordPress】プラグインなし ページ内リンク スクロール 方法
こんにちはrey( @reydesign8376) です都内の勤務生活を辞めてフリーランスに。主にWeb制作しています。趣味のサーフィンなどしながら海沿いでのんびり暮らしています。 …
コメント