Anchored bookmarks conflicting with fixed top-of-page nav

Question

This is my first time posting on here. I've searched for a while for an answer to this question and I'm now turning to this board because it's proven useful to me in the past.

The motif of the page I'm designing is a one page scrolling website (kind of like http://www.kitchensinkstudios.com/).

I've implemented a fixed navigation at the top, about 70px in height. Below this I've created sections that link to the nav. The idea is to click the link in the nav and the page will scroll up to the section chosen. The problem is: due to the automatic nature of internal bookmarks scrolling directly to the top of the page!, this cuts off a majority of the content.

I've attempted to add hidden div's or break tags with padding-top values to the sections in question but, aside from giving me a proper distance from the top of the page, it creates an opaque background with the same value as the padding.

Does anyone have any suggestions for doing this?

Ideally, when you select a link, the section called upon will float up to about the middle of the page.

Much thanks to anyone who gives this one a shot!

Answer 1

The default behavior for browsers is to scroll an anchor to the top of a view port.

If you offset the anchor vertically upwards, you should find it will bring the content down by an equal amount.

You can do this by specifying the position of the anchor as 'relative', and setting the 'top' attribute to a negative value, e.g.

<a style="position:relative; top: -70px;" name="myAnchor"></a>

Some browsers appear to need the anchor taken out of the normal flow, which is solved by simply floating the element.

<a style="float: left; position:relative; top: -70px;" name="myAnchor"></a>

You should find the line above works for FireFox, Chrome and InternetExplorer.