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

Question

I have my markup as follows:

Sheds & Housing

    <         


        
                      

              相关标签:
       
      

Answer 1

Add the id "last_anchor" to the last link in your list and this will achieve it with jquery. How and if you decide to change the margin of the body back is up to you...

$(document).ready(function(){
  $("#last_anchor").click(function(){
    var content_id = $(this).attr("href");
    var win_height = $(window).height();
    var content_height = $(content_id).height();
    var target_margin = win_height - content_height;
    $("body").css("margin-bottom", target_margin)
  });
});​

Answer 2

A better one (No padding div required!)

Try with this jsfiddle. Its working perfectly for me.

Highlights of this fiddle:

1. No padding div required
2. Changing height of last wrapper div, only when last link is clicked

Code below.

$(document).ready(function(){
  //apply height change while clicking on last link only
  $("ul.sub_navi li a:last").click(function(){
    var $targ= $($(this).attr("href"));
    if($targ.height() < $(window).height()){
      $targ.css('min-height', $(window).height())
    }
  });
});​

Answer 3

You will want to wrap your navigation with another div so that you can apply CSS to the navigation entirety. Once that is done you can then position the header to fixed. Next step is to make room for the constant header at the top of the page by moving the content of the page down some (height of navigation) To do this wrap all your content in another div (don't include navigation in this content div) and apply some CSS - margin-top: (height of nav);

#topnav
{
    position: fixed;
}

#content
{
    margin-top: (height of nav);
}

EDIT:

Ah ok I see what you want. To accomplish this you either set the height of the div's Or use min-height on all the dive that way when you go to the anchor their will be room on the bottom for the browser to scroll down to.

So you'd have to define a new class in your CSS as element or item and add a class to each of the div's

CSS 

.elementItem
{
    //use height or min height
}

HTML

<div id="sheds" class="elementId">
    Content
</div>

See JSFiddle: http://jsfiddle.net/dKfVL/

Answer 4

try this fiddle: http://jsfiddle.net/dKfVL/9/

I'm not sure this is possible with css alone (at least not cross-browser anyway).

I've used jQuery to make sure that the #med_vac element has enough height to ensure the title will appear at the top of the page. I've set the code to run when the window is resized so it will also respond to any screen size changes.

Hope this helps!

Answer 5

My initial solution to address your problem is similar to @saurabh's above:

http://jsfiddle.net/Cgx3h/

$('.sub_navi a').click(function() {
    var theID = $(this).attr('href');
    $(theID+':last-child').css('min-height', $(window).height());
})

Something else you may consider, if you end up using jQuery, is highlighting the focused content - while dimming the rest...

http://jsfiddle.net/hZGwA/

$('.sub_navi a').click(function() {
    $('#content div').css('opacity',0.5);
    var theID = $(this).attr('href');
    $(theID).css('opacity', 1);
})

​

Answer 6

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