如何避免在哈希標籤上滾動點擊固定高度內容

Question

我目前遇到了哈希錨鏈接的棘手問題。 這裏是我的HTML代碼的簡單表示：

<div class="main-wrap"> 
<header></header> 

<aside> 
    <nav> 
     <ul> 
      <li><a href="#article1">Article1</a></li> 
      <li><a href="#article2">Article2</a></li> 
      <li><a href="#article3">Article3</a></li> 
     </ul> 
    </nav> 
</aside> 

<section> 
    <article id="article1">Content Here</article> 
    <article id="article2">Content Here</article> 
    <article id="article3">Content Here</article> 
</section> 

<footer></footer> 

和CSS：

body{overflow: scroll;} 

.main-wrap{ 
    overflow: hidden; 
    position: relative; 
} 

header{ 
    position: relative; 
    z-index: 3; 
    height: 10vh; 
} 

aside{ 
    position: fixed; 
    width: 22%; 
    height: 84vh; /* Equal to 100vh - (header + footer)vh */ 
    top: 10vh; 
    left: 0; 
    bottom: 6vh; 
} 

section{ 
    position: relative; 
    min-height: 84vh; /* Equal to 100vh - (header + footer)vh */ 
    width: 78%; 
    left: 22%; /* Equal to aside width*/ 
} 

footer{ 
    position: relative; 
    z-index: 3; 
    height: 6vh; 
} 

我創建了一個工具欄菜單與哈希鏈接有滾動導航，至於我一直在工作。但是當我點擊散列的錨點時，所有元素都向前移動一點，包括頁眉和頁腳，並被.main-wrap元素的overflow:hidden;屬性隱藏。另外，當我回到非哈希頁面時，問題仍然在運行，除非我重新加載它。

我無法找到我如何修復它的任何線索。有任何想法嗎 ？

編輯：我也使用reset.css是在body和html空白和邊距設置爲0

編輯2： 我想我知道發生了什麼事情。通過點擊一個錨鏈接，身體被迫滾動.main-wrap股利，這就是爲什麼一切看起來像它已經上移。實際上.main-wrap的overflow:hidden;屬性剛剛進一步下移，隱藏了錯誤的部分。

Answer 1

默認瀏覽器行爲：

當你點擊一個名爲或散列鏈接時，瀏覽器將嘗試滾動到已在視圖頂部的目標命名的鏈接。

這就是您的代碼所發生的情況。

另一個瀏覽器默認：

大多數瀏覽器都默認邊距和填充比0爲HTML元素，包括html和body元素更大。

你的height: 84vh; /* Equal to 100vh - (header + footer)vh */計算將導致內容高度比視口的高度更多，如果html和body標籤有邊距或墊襯比0更大（並使其滾動，因爲你有body {overflow: scroll;}）。

解決方案：

使用css復位，或在你的情況簡單地添加到您的css

html, 
body { 
    margin:0; 
    padding:0; 
} 

演示https://jsfiddle.net/vkrhnf75/1/