読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

positon fixedのヘッダ固定でページ内リンクのずれを解消

javascript css 備忘録

ヘッダの高さが100pxの場合、

<div id="header">
    ヘッダーがはいります
</div>
<div id="content">
    <a href="#link01">なんとか</a>
    <div name="link01" id="link01">かんとか</div>
</div>

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で調整

<script>
$(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;
    });
});
</script>


【参考URL】
http://www.tam-tam.co.jp/tipsnote/html_css/post4776.html