ナビゲーションのリンクでソースコードまでスクロールできます。
シンプルな色合いの小説ページです。チョコミントアイスやミントアイスモチーフの小説ページのリクエストで作成しました。
PCから見るとこんな感じです。
ページのスクロールに応じてナビゲーションリンクの背景色が変わります。
ページ内スクロールに使用するidはbox~の形で設定してください。(jQueryを変更すればその他の文字列も使用できます)
〇a href="#box1"
〇a href="#box_about"
×a href="#about"
×a href="#Box1"
最後のボックスは中身が少ない(ボックスの頭が画面上部に到達できない)とナビゲーションのスタイルが変わらないので、min-height:90vhを追加して高さを確保しています。
余白が気になる場合は、内容が多めのカテゴリーを配置したり下部にコンテンツを追加したりしてご対応ください。
メニューの色を変える(ツーブロッカ様※リンク切れ)
ページ内スクロール(TechAcademyマガジン様)
ナビゲーションの色を微調整しました。
画像①
画像②
ファビコン