アンカーリンクが誤った位置にスクロールする

Question

アンカーリンクが正しく機能するように苦労しています。ウェブサイトはhttp://www.imprero.comで、一番上に「Zobacz atrakcje」というリンクがあり、「Produkty」というセクションにつながるはずです。ここでは、すでに2つのアイコンの行がすべて表示されているため（div id = "produkty"による）、スクロールするとウィンドウが上方向に上がってしまいます。これは、以下のページのセクションに内部的にリンクされた製品リストです。最初の2つのポジションだけが正しく表示されますが、それ以上は多かれ少なかれ間違いです。各製品セクションには、製品リストに戻る「Lista atrakcji」というリンクがあります。私が同じアイコンのリンクをクリックすると、それは何度か私を少し違う位置に導きます。なんで？何か案は？ありがとうと思います...

Answer 1

問題は、固定ヘッダーがドキュメントフローから外れているため、高さ/位置がブラウザのスクロール位置に含まれないことです。アンカータグをクリックした後にヘッダーを非表示にすると、正しい位置に配置されます。これは、少しのCSSで補うことができます：

// Adjustment for anchor tag positioning with fixed header 
:target:before 
{ 
    content: ""; 
    display: block; 
    height: 57px; //Height of header 
    margin-top: -57px; 
}