How to Link to Specific Points in a Page - html

Question

I try to load specific location in same page. so I use this code and its work fine.
Here the JSFIDDLE.
<div class="header">This is Header</div>
<div id="nav" class="clearfix">
1
2
3
4
</div>
<div class="section">
<h1><a name="headline1">Headline One</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="section">
<h1><a name="headline2">Headline Two</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="section">
<h1><a name="headline3">Headline Three</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="section">
<h1><a name="headline4">Headline Four</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
But the problem is, the header is fixed on position top. When I click the link 1, the Headline one is goes back on header. So the h1 content is not show.
Please visit this Fiddle. You can understand what I am try to say. Thank you for your help.

Answer 1

Simple way: Use padding on the "name" element, to counter the header.
See http://jsfiddle.net/sAdK5/3/
.section h1 a {
display:block;
padding-top:100px;
}
A more complicated way: put all content inside a div container and create inline scrolling with CSS.
You could aslo use jQuery to add the extra scrolling.
See: http://jsfiddle.net/sAdK5/11/
What we do is, create the scrollbar inside the #content area, and measure the height of the window, minus the header - and call it on every window resize.
$(document).ready(function(){
resizeContent();
//attach on resize event
$(window).resize(function() {
resizeContent();
});
});
function resizeContent()
{
//#content height equals window height minus .header height
$('#content').css('height', $(window).height() - $('.header').height());
}