Currently stuck dealing with a challenging problem related to hashed anchor links. Here's a basic representation of the HTML code:
<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>
The CSS for styling:
body{overflow: scroll;}
.main-wrap{
overflow: hidden;
position: relative;
}
header{
position: relative;
z-index: 3;
height: 10vh;
}
aside{
position: fixed;
width: 22%;
height: 84vh;
top: 10vh;
left: 0;
bottom: 6vh;
}
section{
position: relative;
min-height: 84vh;
width: 78%;
left: 22%;
}
footer{
position: relative;
z-index: 3;
height: 6vh;
}
A sidebar menu has been set up using hashed links for navigational scrolling, which seems to be functioning correctly. However, upon clicking on the hashed anchors, there is an issue where all elements shift slightly upwards, including the header and footer, being concealed by the overflow:hidden; property of the .main-wrap element. Furthermore, this problem persists even when returning to the non-hashed page without resolution.
Struggling to find a solution. Any suggestions?
Update: It's worth mentioning that a reset.css file is in use, which sets the padding and margins of body and html to 0.
Update 2:
A potential root cause has been identified. Clicking on an anchor link forces the body to scroll within the .main-wrap div, causing it to appear as if everything has shifted upwards. Essentially, the overflow:hidden; property of .main-wrap is simply extending downwards, resulting in the incorrect hiding of certain sections.