Home/ Questions/Q 3275322
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T19:07:52+00:00

I have a page with a header position:fixed DIV at the top . This

  • 0

I have a page with a header position:fixed DIV at the top. This DIV is height:300px and it is fixed so that it’s always visible even when 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 header and when you scroll, it scroll underneath my header which stays fixed at the top.

In my content DIV, I have multiple anchor. When I click a link to one of these anchor, the page scrolls but places the anchor right at the top of the page. So basically, the content that was supposed to be displayed is hidden under my header…

Do you have any idea how to fix this problem with HTML/CSS..?

Is there another solution apart from using iframe or a frameset..?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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"></script>

    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);
    • 0