Hey there! I'm currently working on a single-page website and running into an issue. When I click on the anchor link in the menu, it seems to go slightly below the intended area, just like in this image https://i.sstatic.net/3hAvO.jpg
I want the behavior to be more like this https://i.sstatic.net/sngCb.jpg
I've tried the code mentioned in this question but unfortunately, it didn't work as expected: Make anchor link go some pixels above where it's linked to
Here's the Javascript code I'm using:
$(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();
});