CODEWITHSUNDEEP
htmlcss
Nathan B
Nathan B

Reputation: 173

Linking to an area slightly above a specific part of a webpage

So I have this:

<a href="#link">clicking here</a>

<a name="link">goes here</a>

Simple, but the problem is that my site has a fixed position header that stays at the top of the page, so when a user clicks on the link, the place I want them to go to is hidden by the header. So I guess where I really want them to end up a certain amount of pixels above what I actually want them to see. I've tried putting the destination link above where I want them to end up, but it's a block of text so it changes with different screen sizes and therefore isn't consistent.

I'm wondering if there is any way to solve this problem, perhaps something with css.

Thanks in advance.

Upvotes: 0

Views: 94

Answers (2)

Sam
Sam

Reputation: 180

I realise this is over a year old, but for the benefit of anyone else who comes across it:

A slightly simpler solution is to put padding at the top of the section you are targeting with the link.

HTML: 

<section id="section_name">  

  ...Your stuff here...  

</section>

CSS: 

#section_name {
  padding-top: 40px;
}

Upvotes: 2

Dan
Dan

Reputation: 5637

You could use a jQuery method so that when a link with a # is clicked, it finds the position of the element it's meant to go to and then moves to a position X number of pixels above the target.

Something like this:

$(function(){

    var positionOffset = 50;

    $('a[href=*"#"]').click(function(){

        var targetHash = this.hash;
        if(targetHash.length > 0 && targetHash == window.location.hash){

            var elementPosition;

            if($(targetHash).length){

                elementPosition = $(targetHash).offset();

            } else {

                var targetAnchor = targetHash.replace("#", "");
                elementPosition = $('a[name="' + targetAnchor + '"]').position();

            }    

            $(window).scrollTop(elementPosition.top - positionOffset);      
            return false;    

        } else {
            return true;
        }

    });

});

Upvotes: 0

Related Questions