[Solved] Add spacer to anchor link?

[bahgheera]

Hi folks, back again with another question. My site, a forum, has anchor links to each message. I’ve moved the header bar and nav bar to fixed divs at the top, so when you click one of these anchor links, it goes to the top of the viewport and is partially obscured by the header and nav divs. I would like to know how to force the anchor down by 110px. I’ve searched and tried a number of solutions on the web – transparent borders, negative margins, etc. Any insight on this would be greatly appreciated.

The site is http://www.theflipsideforum.com.

Thanks!

[bahgheera]

Here you go, I did this quick so you can see what I’m getting at. Scroll to the bottom, click the “Back to top” link and see what happens to the main content.

http://codepen.io/bahgheera/pen/dFCjh

[bahgheera]

Nevermind, this is solved. The negative margin trick finally did it.

[e6z6a6z]

You dont need to add that javascript code you can either define an offset value according to the height of your div about the content wrapper

[e6z6a6z]

delete your javascript and try this:
$(document).ready(function() {
//Scroll Down Animation on Menu Click
$(‘a[href^=”#”]’).click(function(event) {
var id = $(this).attr(“href”);
var offset = 80;
var target = $(id).offset().top – offset;
$(‘html, body’).animate({scrollTop:target}, 1700);
event.preventDefault();
});
});

you can change the value of var offset=80;

and replace your back to top html with :
`

<a href="#content_wrap">Back to top</a>

`

[Author]

Posts