Ad

Single Page Anchor Link Goes Bellow Some Pixels Where It Is Linked With #link

- 1 answer

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 enter image description here

i want it like enter image description here

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();
    });
Ad

Answer

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();
    });
Ad
source: stackoverflow.com
Ad