[HTML]aタグを使ったページ内遷移でposition:fixedなコンテンツに潜り込ませない方法

onishiです。
今回は、position:fixedなヘッダーを設置しているhtmlでaタグのページ内遷移を使用して、
スクロールさせた場合、スクロール先のコンテンツがヘッダーに潜り込んでしまう問題です。

一見簡単そうに見えますが、いまいちスッキリしない方法しか思いつかなかったため共有します。

今回の事象

まずは、今回の事象を以下で確認して下さい。

ヘッダー領域の下へ、「コンテンツx」を表示させたいのですが、ヘッダーに潜り込んでしまいます。

対応方法1

「コンテンツx」の上にスクロール用ダミー領域を設置し、スクロール先をダミー領域に向けることでヘッダー分のオフセットを確保します。

メリット

  • css, htmlのみで実装可能
  • URLへ”#dummy_sc10″を付加することで動作するため、他ページより遷移してきた場合にスクロールさせて表示させることも可能

注意点

  • ダミー領域を display:none にすると動作しないので注意

対応方法2

jQueryでスクロールさせる

メリット

  • 変更箇所は <script> 部分のみのため、htmlが複雑にならない。
  • スクロールアニメーションが( ・∀・)イイ!!

デメリット

  • 他ページより遷移してきた場合に任意のコンテンツへスクロールさせる場合は、自分で実装する必要がある。

もっとスマートな方法をご存知がいたら教えて下さい!

onishi
About onishi (10 Articles)
主にjavascript(jQuery),iOSを担当しています。

Leave a comment

Your email address will not be published.

*



Top