Anchor link scrolls too far

[jjmil03]

Hello,

I have seen a few posts on this but I was hoping to maybe get a simpler answer. I am trying to create anchor links within a page. I have a sticky header. When I do this, the page scrolls too far down and covers the Title that I’m trying to go to. Is there a way to get it to go to the element in question, and not so far where the menu header covers the text? Do I have to do this via jquery or is there a simpler solution? Thanks.

I tried this solution but it didn’t seem to work: https://theme.co/apex/forums/topic/anchor-link-scrolls-too-far-top-is-covered-by-x-navbar/

jQuery(document).ready(function(){
    jQuery('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash,
        jQuerytarget = jQuery(target);

        jQuery('html, body').stop().animate({
            'scrollTop': jQuerytarget.offset().top-220
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

Thanks.

Jon

[mldarshana]

Hi There Jon,

Thanks for writing in! This issue has been already reported to our developers for further review.

In the meantime, could you please try following this solution here (https://theme.co/apex/forum/t/navigation-glitch-with-one-page-navigation/34966/11?u=mldarshana).

Hope that helps.

[jjmil03]

Will this fix it for all screen sizes, or must mobile (the link with the code specifically mentions mobile). Thanks!

Jon

[jjmil03]

I applied it and it does appear to work for me. Thanks!

[Alaa]

Hi Jon,

Yes, it should work for both Desktop and Mobile devices, however, the final solution will be provided by our team in one of the upcoming releases, unfortunately, we don’t have an ETA for that yet.

Thanks.