Single page anchor link goes bellow some pixels where it is linked with #link

Question

hi i am working on a single page website, issue i am facing right now is when i click on anchor of menu, it goes few pixels bellow the required area as shown in pic

i want it like

i have tried this code but no success Make anchor link go some pixels above where it's linked to

Javascript i am using is

$(document).on('click', 'a.page-scroll', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });

You should add the source code (HTML OR CSS) stating where the issue is...... — Mamun, Dec 22 '18 at 10:31
$(document).on('click', 'a.page-scroll', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1500, 'easeInOutExpo'); event.preventDefault(); }); — Umair Mehmood, Dec 24 '18 at 04:42

score 0 · Accepted Answer · answered Dec 24 '18 at 06:29

i got the solution of issue just by subtracting the desired height form the actual height. Complete and running code for me is following

$(document).on('click', 'a.page-scroll', function(event) {
        var $anchor = $(this);
        var desiredHeight = $(window).height() - 577;
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - desiredHeight
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });

Single page anchor link goes bellow some pixels where it is linked with #link

1 Answers1