html bookmark link some text doesn't appear [duplicate] - html

Question

This question already has answers here:
Fixed page header overlaps in-page anchors
(38 answers)
Closed 11 months ago.
I created a link (Bookmark) to the same page. But here I face a problem. When I click the link on the link from the sidebar, it works fine but the headline or some part doesn't appear correctly on the display.
When I click the link the heading or some part is hidden for the header.
But I want the full part will be displayed like this -
How do I solve this issue?
header{
width: 100%;
height: 50px;
border-bottom: 1px solid #333;
background-color: #fff;
z-index: 5;
top: 0;
position: fixed;
}
nav{
width: 20%;
height: 100%;
top: 0;
left: 0;
position: fixed;
border-right: 1px solid #333;
}
article{
padding-top: 60px;
margin-left: 20%;
width: 60%;
}
aside{
width: 20%;
right: 0;
top: 0;
position: fixed;
border-left: 1px solid #333;
height: 100%;
padding-top: 60px;
}
<header></header>
<nav></nav>
<article>
<a name="hyper-1"></a>
<h1>Hyper 1</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<a name="hyper-2"></a>
<h1>Hyper 2</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<a name="hyper-3"></a>
<h1>Hyper 3</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</article>
<aside>
IN THIS CONTENT:
Hyper-1<br/>
Hyper-2<br/>
Hyper-3<br/>
</aside>

Answer 1

the issue is due to elements are empty. they have no consistency and scroll to this element don't push following at the top of the div
to solve it an idea can be to have an hidden after element after <a> to push following as expected when scroll to this anchor point
article a::after {
content: ' ';
padding: 12px;
}
header {
width: 100%;
height: 50px;
border-bottom: 1px solid #333;
background-color: #fff;
z-index: 5;
top: 0;
position: fixed;
}
nav {
width: 20%;
height: 100%;
top: 0;
left: 0;
position: fixed;
border-right: 1px solid #333;
}
article {
padding-top: 60px;
margin-left: 20%;
width: 60%;
}
article a::after {
content: ' ';
padding: 12px;
}
aside {
width: 20%;
right: 0;
top: 0;
position: fixed;
border-left: 1px solid #333;
height: 100%;
padding-top: 60px;
}
<header></header>
<nav></nav>
<article>
<a name="hyper-1"></a>
<h1>Hyper 1</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<a name="hyper-2"></a>
<h1>Hyper 2</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<a name="hyper-3"></a>
<h1>Hyper 3</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</article>
<aside>
IN THIS CONTENT:
Hyper-1<br/>
Hyper-2<br/>
Hyper-3<br/>
</aside>

Answer 2

If I get it correctly, you need to scroll on top of the page any time it gets loaded... since it may be loaded from a link coming from the very same page.
One solution is to scroll on top of the page as soon as it's ready:
$(document).ready(function(){
$(this).scrollTop(0);
});