『ラゴン・ジュルナル』に来てくださってありがとうございます!

「JavascriptをOn」にしていない端末やブラウザで閲覧しているかたに、このアラートが表示されるようになっております。Javascriptを許可してからおたのしみくださいませ。

Chrome「設定」→「詳細設定」→「プライバシーとセキュリティー」→「サイトの設定」→「Javascript」を許可 iPhone「設定」→「Safari」→「セキュリティ」→「Javascript」をオン iPad「設定」→「Safari」→「詳細」→「Javascript」をオン Android「メニュー」→「設定」→「高度な設定」→「Javascriptを有効」など

ページ内リンクで飛ぶときにスムーズになるようにし、固定ヘッダーに隠れないようにしました。(一部ブラウザのみ)

サイト改善記録 #17

サイト

Lagon Journal

なにをどうしたか

ページ内リンクで飛ぶときにスムーズになるようにし、固定ヘッダーに隠れないようにしました。(一部ブラウザのみ)

具体的な変更 - css

ほんとうは生のJSで書きたいのですが、けっこうめんどうそうなのであたらしめのプロパティで対処しました。bodyにあてたくなりますが、htmlのほうがいいっぽいです。「85px」というのはけっこうてきとうな数字です。

html{
    scroll-behavior: smooth;
    scroll-padding-top: 85px;
}

そのほか

:target:before {
   content:"";
   display:block;
   height:85px;
   margin:-85px 0 0;
} 
#anchor {
   margin: -85px;
   padding: 85px;
} 

こういったやりかたもあるのかもしれません。

Written by Dev. Team
Copyright LagonGlaner and Author