実現したいこと

iphoneでスクロールした際の、アドレスバーの表示・非表示に不都合があり、
常にアドレスバーを出す方向で調整しています。

やったこと

画面の高さを取得し、全体を包括するdivに高さを付与し、その親の中でスクロールさせることにしました。
しかし、ページ内リンクがうまく動きません。

html
1<body>
2<div id="spWrapper">
3<head id="hdFix">
4/* menuはスクロール途中で固定 */
5</head>
6
7<ul>
8<li><a href="linkA">リンクA</a></li>
9<li><a href="linkB">リンクB</a></li>
10<li><a href="linkC">リンクC</a></li>
11</ul>
12
13<div id="#linkA">リンクA内容テキスト</div>
14<div id="#linkB">リンクB内容テキスト</div>
15<div id="#linkC">リンクC内容テキスト</div>
16
17</div><!--/spWrapper -->
18</body>

css
1#spWrapper {
2overflow: scroll;
3-webkit-overflow-scrolling: touch;
4}
5.fixed{
6 position:fixed;
7 left:0;
8 top:0;
9/*その他略*/
10}

javascript
1//画面高さ取得して設定
2$(document).ready(function(){
3var hSize = $(window).height();
4  $('#spWrapper').height(hSize);
5});
6$(window).resize(function(){ 
7var hSize = $(window).height();
8  $('#spWrapper').height(hSize);
9});
10
11//親divスクロールしたらheaderをfix
12$("#spWrapper").scroll(function () {
13var element = document.getElementById( "spWrapper" ) ;
14var y = element.scrollTop ;
15var nav = $('#hdFix');
16        if (100< y) {
17            nav.addClass('fixed')
18        } else if (100 > y) {
19            nav.removeClass('fixed')
20        }
21});
22
23// ページ内リンク 
24//※動くは動くが、ヘッダーの高さが正しく認識できずズレる。 スマホを横にするとより一層ズレる。
25$(document).ready(function() {
26var headerHight = $("#hdFix").outerHeight();
27    $('a[href^="#"]').click(function() {
28        var href = $(this).attr('href');
29        var pos = $(href).offset().top - headerHight;
30        var duration = 600;
31        $('#spWrapper').animate({ scrollTop: pos }, duration, 'linear');
32        return false;
33    });
34  });
35