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">
<a href="#headline1">1</a>
<a href="#headline2">2</a>
<a href="#headline3">3</a>
<a href="#headline4">4</a>
</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());
}