如何避免在哈希标签上滚动点击固定高度内容

我目前遇到了哈希锚链接的棘手问题。这里是我的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;属性刚刚进一步下移，隐藏了错误的部分。

来源

2016-03-01 Hadrien Lepoutre

这个问题类似W/A固定头和被遮挡的锚？一种选择是：将一个类添加到具有“padding-top”值的锚点以将其向下推。或者，使用'：before' psuedo-element或JS来更改元素的偏移量。可能不会直接适用于您的侧边栏问题，但也许是正确的方向：http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors .... – mc01

默认浏览器行为：

当你点击一个名为或散列链接时，浏览器将尝试滚动到已在视图顶部的目标命名的链接。

这就是您的代码所发生的情况。

另一个浏览器默认：

大多数浏览器都默认边距和填充比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/

来源

2016-03-01 19:33:01 Arbel

Ups，对不起，我忘了提及我已经使用了一个带边距和填充为0的reset.css。它不能从这里来。 –

如果您从演示中删除边距和填充，您将获得滚动。因此，可能您的发布的代码片段不完整，或者您的CSS重置不会重置HTML和正文的边距和填充。 – Arbel

好的，我正在检查它以防万一。看看我做的第二个编辑，我认为这是我问题的根源。你怎么看？ –

如何避免在哈希标签上滚动点击固定高度内容

回答

相关问题