Jump to specific place on same page

Question

Im trying "page jump" on same page to specific place.

Im trying simple solution with "id":

<a href="#apple">More about apples!</a>

<a name="apple"></a>

But I have on my page sticky header, and jumped text is showing under header, so that's really useless. When I use javascript with:

window.scrollBy(x, y);

its useless to, because when I reduce window, javascript jump on different place on page.

Any advices please? Thanks!

Answer 1

Add the offset according to height of your header

jQuery(document).ready(function(){
function secOffset(){
                        jQuery('html, body').animate({
                        scrollTop: jQuery(window.location.hash).offset().top + 60
                }, 0);
        }
});