60L.design へのメールフォームです。 ご質問、お問合せ、お見積り等、お気軽にお送りください。
データの送信は firestorage 等の転送サービスをご利用ください。

お名前 ※必須項目 お名前を入力してください
会社様名
お返事先メールアドレス ※必須項目 お名前を入力してください
お問合せ種別

お問合せ内容 ※必須項目 お問合せ内容を入力してください
次の2つの数字を足して入力してください。 ※必須項目 半角数字を入力してください。

+

=

閉じる
お気軽にお見積り、
お問合せ下さい
アンカーリンクで飛ぶと、ヘッダが上部に埋まってしまう問題

製作中のサイトで、ふとアンカーリンクでジャンプして、ヘッダに戻ったら『ヘッダが上部に埋まってしまう』問題を発見しました。
何かcssの指定ミスかな?と思って調べても不明、topやmargin、paddingを0pxに明示してもダメ…。
ブラウザのディベロッパーツールで、displayをnoneにして、再度blockに戻すと復帰。どういうことなのでしょう…?

一番親のボックス(bodyと同じサイズでcontainerボックスでラップしています)のpadding-topを300pxくらいにすると、ヘッダがちゃんと存在していることを確認。でも別にネガティブマージンが指定されてるわけでもなく…。

まず、アンカーリンク設置はヘッダ。これ自体は変なことをしていませんが、これをクリックしてジャンプするとヘッダ埋まり問題が発生します。
アンカー設置は色々試してみましたが、どこに持っていってもダメな様子。唯一、ヘッダも同時に全て見える場所にしたときのみ(アンカーがほとんどトップに近い時のみ)問題なし。そもそもアンカーは動作してないのかも。

で、調べてみたら、同じ問題を抱えている方がいらっしゃって、しかもアンカー設置(ヘッダのリンク側ではなく、idを指定している要素の方)側の親要素にoverflow:hidden;が指定していると起こるとの情報あり。

私の場合、最も親の、コンテンツ全体をラップしているcontainerボックスに、レスポンシブのおまじないでoverflow:hiddenを指定していました。先祖に1つでもoverflow:hidden指定があると良くないということですね。

というわけで、先祖の要素からoverflow:hiddenを削除すればアンカーリンクが正常に動作しました。
デバッグでも見つけづらく、というか私には見つけられませんでしたが、全てのブラウザで起こってびっくりしましたが、一応の解決とはなりました。

しかし、親要素にoverflow:hiddenが必要なケースもあると思います。なぜこのような挙動なのでしょう…間接的にもアンカーは影響していないと思うのですが…。

ちなみに、私はアンカーリンクでジャンプ先がウィンドウ上部にぴったりくるのを避けたくて、
<div id=”anc_01″></div>
という空要素にidをつけ、
position:absolute : top : -100px ;
width : 1px ;
height : 1 px ;
などでオフセットをつけています。
スマフォレイアウトでヘッダをfixedにしている場合など、こうするのが楽かなと思っています。
でもあまりアンカーを使うサイトは多くない印象だったので、さしぶりに問題に直面して焦ってしまいました。

『ふうらい姉妹1巻』読んでいて主人公の生活が非常に不安になる、超シュール系4コマ。

『LIAR GAME 18』最終戦、四国志ゲーム開始!19巻は4月中に発売なので完結直前です!

『野崎まど劇場』なんて酷いラノベだ…と、爆笑しました。フリーダムな短編集。将棋のアレも…。

『iPhoneアプリ開発の教科書』カラーでイラスト多くて、まずはこれを読んでみようと購入しました。

『数論の世界』高校レベルの知識での面白い数論の話。高校の時にこの本を知っていたら…。

『ミーティアわんわん』古賀亮一先生の電撃新連載!もったいないので少しずつ読んでます。

『新ゲノム5』相変わらずの古賀亮一マンガです。とにかくギャグの密度が高い…!

『HTML5&CSS3ポケットリファレンス』技術評論社のPRシリーズは鉄板です。

『容疑者Xの献身』今更ながら、こんなに面白い邦画に出会えるとは…!悪い予想を上回る結末。

『ゆるめいつ』シュール系脱力4コマ!この作品に触発されて4コマを描き始めました。