Anchor Tag to Middle Of Page

Question

Currently at my wits end with this problem. I have a navigation bar at the top of my page that covers a portion of the website as it scrolls down. It contains links that are all anchors (The website is currently a single lengthy page) that when clicked the page jumps to them as expected.

However the anchor is placed at the top of the page which means that it is obscured by the menu that overlays the top of the content.

Without moving the anchor link is there someway with JavaScript or even CSS/HTML to get it so that the anchor moves to the middle or below the top by X amount so that it isn't covered by the menu and the reader can read the content.

The example I have is my website which I am currently trying to get it working on. http://kirisuteranza.co.uk . Any help would be greatly appreciated.

Answer 1

If I understand you right, you want to have the anchor move when the user scrolls so the navigation menu doesn't cover it. You can do that with CSS:

.anchor
{
position: absolute;
top: 20px; /* According to size of menu */
left: 650px;
}

When the user scrolls it stays in the same position, not over lapped by the menu.

Answer 2

Just add one line of CSS-

.size1of1{
    margin-top:70px;
}

Edited:

Go to your style.css file. Then Just replace all margin-top:3.750em with margin-top:4.375em

Answer 3

You can use jQuery if you'd like:

function goTo(el) {

    $('html, body').animate({
        scrollTop: el.offset().top + 'px'
    }, 'fast');

}

$('#about-button').on('click',function() {
    goTo( $('#about-section') );
});

This will require that you give your anchors and h1 elements ID attributes.

You'll need to include jQuery in the head of your HTML page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>