アンカースロースクロール固定ヘッダー

Question

ページのアンカーに円滑なスクロールを使用したいと思います。

<script> 
$(document).on('click', 'a', function(event){ 
    event.preventDefault(); 

    $('html, body').animate({ 
     scrollTop: $($.attr(this, 'href')).offset().top 
    }, 500); 
}); 
</script> 

唯一の問題は、私は88pxの高さと、固定されたヘッダを有することである： したがって私は、次のコードを使用します。アンカーをクリックすると、現在はアンカーにスクロールします。

正しく動作するようにコードを拡張するにはどうすればよいですか？

Answer 1

あなたの固定ヘッダは常には88pxの高さを持っていることがわかっている場合、あなたは、単にそのためのスペースを作るために、最終的なスクロール位置にその値を追加することができます:)

$('html, body').animate({ 
    scrollTop: $($.attr(this, 'href')).offset().top + 88 
}, 500); 

固定ヘッダの場合高さが変わるかもしれないので、あなたはそれをouterHeightでチェックし、それをオフセットに加えたいでしょう。固定ヘッダのjQueryオブジェクトを$fixedHeaderとして格納されていると仮定すると：

$('html, body').animate({ 
    scrollTop: $($.attr(this, 'href')).offset().top + $fixedHeader.outerHeight() 
}, 500); 

Answer 2

あなたはscrollTopスプライトに88pxを追加しようとしましたか？

<script> 
$(document).on('click', 'a', function(event){ 
    event.preventDefault(); 

    $('html, body').animate({ 
     scrollTop: $($.attr(this, 'href')).offset().top + 88; 
    }, 500); 
}); 
</script>