中途半端を極める

web関連で役に立ちそうなものを紹介いたします

css javascript

ヘッダ固定時のページ内リンクのずれを解消する方法

投稿日:

position:fixedを使ってヘッダを固定した場合、ページ内リンクの位置がヘッダの高さ分ずれてしまいます。どのように調整すればいいか紹介いたします。


※前提条件:固定するheaderの高さが100pxの場合

CSSで調整する場合

#header {
    width: 100%;
    min-width: 960px;
    height: 100px;
    position: fixed;
    left:0;
    top:0;
    z-index: 10;
}
#content{
    padding-top: 100px;
}
#link01 {
    margin-top:-100px;
    padding-top:100px;
}

JavaScriptで調整する場合

$(function () {
    var headerHight = 100; //ヘッダの高さ
    $('a[href^=#]').click(function(){
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす
        $("html, body").animate({scrollTop:position}, 550, "swing");
        return false;
    });
});

※jqueryを使用します。

-css, javascript

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

【CSS】IEでCSS3を使うようにする方法

角丸が多用されているようなサイトにはCSS3で対応した方が楽です。しかし、Internet Explorer6,7,8がCSS3非対応などであきらめている人が多いのではないでしょうか? そういった人に …

【javascript】年齢認証ページの作り方 一例

エロサイトや酒の紹介ページ(販売ページ)などに使えるjQueryを紹介いたします。

レスポンシブサイトにPC用とスマホ用の切り替えボタンをつける方法を紹介

最近レスポンシブサイトが増えてきました。スマートフォン用のサイトにはPC用を表示するボタンがついていますが、その機能を実装する方法を紹介いたします。javascriptを使用いたします。

【javascript】西暦を自動的に更新されるようにjavascriptで表示する

今回は西暦を自動的に更新されるようにできるjavascriptをメモしておきます。 ・現在の西暦を自動的に取得する方法。 ・最終更新日の西暦を取得する方法。 2パターンあります。 コピーライトの部分と …

【IE6】CSSでリストの隙間を消す方法

IE6で出る症状です。リストでナビゲーション作ってるときによく出くわします。 今でもIE6かよって話もありますが、一応自分用メモって事で記しておきます。