Question

我有一个单页网站（Squarespace-Pacific模板）https://pacific-demo.squarespace.com/?nochrome=false，顶部带有导航栏，该导航栏随主页一起滚动，并在滚动到第一部分时再次出现。所有链接都固定在对应的部分，该部分向上滑动并与滚动条上显示的导航栏保持一致。

我想用一个箭头添加到主页的链接，该箭头仅将您发送到第一部分，并将其与出现的导航栏对齐。通过一个简单的锚链接，该部分滚动到导航栏的导航栏顶部。

我尝试了此脚本（为我使用的每个媒体查询添加一个脚本）并且可以运行，但是如果我调整浏览器的大小，导航栏会消失，因此我想使用其他脚本。

 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

您可以使用良好的偏移量（菜单高度）来执行以下操作：

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

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

1 个答案: