ヘッダの高さが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