0

I am making a single page scrollable website and I set my links to anchors along the page. All works fine except that the anchor will be displayed at the top of the page as default and it is covered by the fixed nav bar (73px height). Is there any way of setting the display position 73px down from the top? All the elements already have their positions, paddings, margins etc :-/

Here is the website http://www.drawlight.net/wordpress/?page_id=1784

I really appreciate the help!

Juliana.

user3616665
  • 1
  • 1
  • 1
    possible duplicate of [offsetting an html anchor to adjust for fixed header](http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header) – web-tiki May 08 '14 at 13:46

1 Answers1

2

Demo Fiddle

Change the href of the scroll-to-top anchor to, e.g. #this_is_the_top

Then before it in your HTML add:

<a id='this_is_the_top'>top</a>

nb. You dont have to specifically add an a, any element with that id will work.

And also add the CSS

#this_is_the_top{
    position:absolute;
    top:73px;
}

At present, you are simply targetting the top of your page with the scroll position, as you're href is simply '#', you want to target a specific element which is offset from the top (using position and top).

SW4
  • 69,876
  • 20
  • 132
  • 137