Geek Answers Handbook

Problem with HTML anchor in absolute div 300px on top ..?

I have a page with a headline : fixed div at the top . This DIV has a value of height: 300px , and it is fixed so that it is always displayed, even if users scroll down.

My content is in another div below. It has a position: absolute with a top: 300px . So when you first load the page, it starts below my heading, and when you scroll it, it scrolls under my heading, which remains fixed at the top.

I have several anchors in my DIV content. When I click on a link to one of these anchors, the page scrolls, but anchors the anchor at the top of the page. So the content that was supposed to be displayed is hidden under my heading ...

Do you have an idea how to fix this problem using HTML / CSS ..?

Is there any other solution besides using an iframe or a set of frames.?

+4
source share
3 answers

You can do this with jquery.

First you need to include the jquery <head> f you aint library.

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

as per the above, you need the following javascript

 <script type="text/javascript"> $(function(){ $('a[href*=#]').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); if ($target.length) { var targetOffset = $target.offset().top - 300; $('html,body').animate({scrollTop: targetOffset}, 10); return false; } } }); }); </script>

The next line from the above script controls the offset or "margin" on top.

 var targetOffset = $target.offset().top - 300;

You can also make the scroll smooth by increasing the value on this line.

 $('html,body').animate({scrollTop: targetOffset}, 10);

try replacing it with this.

 $('html,body').animate({scrollTop: targetOffset}, 1000);
+1
source

Filling and negative fields should work on this. Here is an example preview page: http://jsbin.com/ucili/edit

Essentially for anchors, I have padding-top 300px and margin-top of -300px. Laying ensures that the anchor does not fall under a fixed div, a negative margin makes it so that the content passes correctly (without huge spaces in the space).

+4
source

This example uses the padding- / margin-top trick, but is implemented using the CSS3 :target pseudo-class:

 /* assuming the header-height is 8em */ :target { padding-top: 8em; margin-top: -8em; }
+1
source

More articles:


All Articles