Make named anchor bookmarks appear always at top of the screen when clicked

Question

I have my markup as follows:

Sheds & Housing

    <         


        
      

Answer 1

Check-out my solution first: http://jsfiddle.net/dKfVL/4/

The above solution uses JavaScript, it adds height to the required div dynamically only when the link is clicked.

var fixLink = $(".sub_navi li:last a"); // change this to a/c to your requirement

fixLink.click(function(){
    var targetDiv = fixLink.attr("href"); //get the ID of div to be fixed
    $(targetDiv).height($(window).height());
});  

This does not remove the height afterwards, I don't see a reason why you would like to do that. But if you really want to do that, you can monitor the scroll-event of the browser if the scroll is greater that the view-port height, then you can set height of the target div to auto.

---

Option 2:
If you don't want to use javascript, you can use the vhunit of css, which is very similar to % unit in css, with the difference that it is relative to view port, and it currently work in chrome only.

CSS:

#med_vac {
  height: 100vh;
}

jsfiddle: http://jsfiddle.net/dKfVL/5/
Note: this is not cross-browser