How to Link to Specific Points in a Page

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.

oh sorry. I dont know how to write jquery for about this program. — Selvamani, Oct 19 '12 at 11:08
http://stackoverflow.com/questions/12238099/make-named-anchor-bookmarks-appear-always-at-top-of-the-screen-when-clicked — Jawad, Oct 19 '12 at 11:08
FYI: name attribute for internal links are best replaced by ID attribute internal linking. meaning giving you sections the id of the name attribute. — Mark, Oct 19 '12 at 12:28

Marco Johannesen · Accepted Answer · 2012-10-19T11:43:24.443

3

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());
}

edited Oct 19 '12 at 11:43

answered Oct 19 '12 at 11:12

Marco Johannesen

13,084
6
31
36

And again you hit the clock. :) – insertusernamehere Oct 19 '12 at 11:14
1

The padding will "ALWAYS" be there! – Jawad Oct 19 '12 at 11:15
@Jawad ofcourse, but he already had "spacing" between sections, so he might aswell use it for fixing the "navigation". Thats why its hard to answer his question, so i just kept it KISS. – Marco Johannesen Oct 19 '12 at 11:18
Thank you Marco. But I no need to add padding. http://jsfiddle.net/sAdK5/3/ here in this situation, How may I correct this bug. – Selvamani Oct 19 '12 at 11:22
@Selva added jquery example ;-) – Marco Johannesen Oct 19 '12 at 11:43
Thank you for your code its work fine. Is any other possible way to write jquey without resizing the window? – Selvamani Oct 19 '12 at 11:59

How to Link to Specific Points in a Page

1 Answers1