如何将页面部分锚定在滚动显示的导航栏底部？

Question

I have a single page website (Squarespace - Pacific template) https://pacific-demo.squarespace.com/?nochrome=false with a Navigation bar at the top that scrolls away with the home-page and appears again once you scroll to the first-section. All the links are anchored to the correspondent section that slides up and stops in line with the Navigation Bar that appears on scroll.

I would like to add a link to the home-page with an arrow that sends you down only to the first-section and aligns this with the appearing navigation bar. With a simple anchor link the section scrolls to the top of the browser behind the Navbar.

I tried this script (adding one for each media-query I used) and it works, but if I resize the browser, the Navbar disappears, so I'd like to use something different.

 if($(window).width() < 1438)
{
$("#arrow-down").click(function() {
    $('html,body').animate({
        scrollTop: $("#officina-page").offset().top -120},
        'slow');
});
}

    else if($(window).width() > 1439 && $(window).width() < 1558)
{
   $("#arrow-down").click(function() {
    $('html,body').animate({
        scrollTop: $("#officina-page").offset().top -130},
        'slow');
});
} 

Answer 1

You can do something like this with the good offset (height of your menu):

if($(window).width() > 1438) {
    $(function() {
      $('a[href*=#]').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
      });
    });
}