基礎編

ページ内リンク

ページ内リンク
WEB先案内
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください!

ページ内リンク

おさえておきたいところ

「ページ内リンク」を使う目的はこんな感じです。

             目的:ページ内の目的の場所にスクロールさせる
動きのきっかけ:クリック / スクロール

追従するHeader分の高さを引いて適切な場所へスクロール

See the Pen 追従するHeader分の高さを引いて適切な場所へスクロール by Web Navigator (@web-navigator) on CodePen.

ページ内の指定の場所にスクロール

See the Pen ページ内の指定の場所にスクロール by Web Navigator (@web-navigator) on CodePen.

次回の予定

ページのスクロールを促す「スクロールダウン」を作ってみようと思います\\\\٩( ‘ω’ )و ////
合わせて読みたい
ページ内リンク
ページ内リンク
ABOUT ME
WEBさん
WEBさん
WordPressの不具合をなおす人
あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか? WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。
記事URLをコピーしました