Question

I have added top menu as a div with position: fixed.
It’s placed in the top of the page, so it covers part of the content.
I moved the layout down, so generally it’s ok, BUT if user clicks any anchor link, the page scrolled to where the anchor is on top. But it’s covered by the top menu.
Is there a way to catch anchor event and process it with javascript (and jQuery if necessary)?

Answer 1

You can use something like this:

$('a').click(function(){
    $('html').scrollTop($($(this).attr('href')).position().top + menu_height_offset)
})

To get the anchor position

$($(this).attr('href')).position().top

To make the offset related to the fixed menu

menu_height_offset

To make move the scroll

$('html').scrollTop()

http://api.jquery.com/scrollTop/

http://api.jquery.com/position/