如何避免滚动哈希标签点击，内容固定

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; 属性隐藏。此外，当我返回非哈希页面时，除非我重新加载它，否则问题仍在运行。

我找不到任何关于如何解决它的线索。有什么想法吗？

编辑 ：我还使用重置.css即将body和html填充和边距设置为 0。

编辑 2 ：我想我知道发生了什么。通过单击锚链接，正文被迫滚动.main-wrapdiv，这就是为什么一切看起来都已经移到了顶部。事实上，.main-wrap的overflow:hidden;属性刚刚向下移动了一点，并且隐藏了错误的部分。

Answer 1

默认浏览器行为：

当您单击命名或哈希链接时，浏览器将尝试滚动以使目标命名链接位于视图顶部。

这也是您的代码正在发生的事情。

另一个浏览器默认值：

大多数浏览器对HTML元素（包括html和body元素）的默认边距和填充大于 0。

如果html和body标签的边距或填充大于0，则计算height: 84vh; /* Equal to 100vh - (header + footer)vh */将导致内容高度大于视口高度（并使其可滚动，因为您有body {overflow: scroll;}）。

溶液：

使用css重置，或者在您的情况下将其添加到您的css

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

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