ansaurus

Question

Problem with HTML anchor in absolute DIV 300px from the top..?

Answer 1

+1 A:

Padding and negative margins should work on this. Here's an example page to preview: http://jsbin.com/ucili/edit

Essentially, for the anchors, I have a padding-top of 300px and a margin-top of -300px. The padding makes sure the anchor doesn't fall under the fixed div, the negative margin makes it so the content flows correctly (without huge gaps of white space).

RussellUresti 2010-10-19 19:57:55

Great.! It seems to work on first try. I'll have to test for cross-browser but so far so good..! Thanks.

pnichols 2010-10-19 20:37:38

After more testing, there was some bug. It maybe was due to other CSS...

pnichols 2010-10-20 18:23:50

Feel free to modify the example I created on JSBin. Or if you could provide a link to something I could test against, I'd be glad to help you debug it.

RussellUresti 2010-10-21 04:15:09

Answer 2

+1 A:

You can do it with jquery.

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

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

under 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 following line from the above script controls the offset, or 'margin' from the 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);

Rocket Ronnie 2010-10-19 20:00:03

Great, that's what I ended up using. Thanks.

pnichols 2010-10-20 18:24:36

ansaurus

tags:

views:

answers:

Problem with HTML anchor in absolute DIV 300px from the top..?

related questions