javascript - anchor 标签链接向下滚动太远但仅在移动设备上

Question

我正在重新设计我的投资组合网站，我在网站顶部固定了一个静态栏。栏中的每个链接都是一个 anchor 链接，向下滚动到它对应的 ID。如果您以全屏模式查看网站， anchor 链接会精确滚动到它们应该去的地方，但是如果您将屏幕大小调整为移动 View ，它们最终会向下滚动太多。

我怀疑它与下面的一段 javascript 和 45 偏移量有关。问题是，如果删除偏移量，它会在移动设备和桌面设备上向下滚动太多。

<script>
 $('a[href*=#]').click(function(event){
 $('html, body').animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top - 45
    }, 500);
event.preventDefault();
    });
</script>

知道是什么原因造成的吗？这让我发疯。这是 URL到网站。

请尽量忽略所有占位符文本和图像，我昨晚才开始，所以还远未完成。

Answer 1

我遇到的问题是在移动设备上，我们有一个响应式菜单，用户单击它可以展开。当他们单击链接时，页面会滚动到锚定链接，但超出了它。

原来的问题是，在他们单击链接后，展开显示导航的菜单是内联的，并将内容向下推。单击链接后，菜单设置为再次关闭，因此内容向上移动。

滚动操作将转到菜单打开时内容的原始位置。

解决方案是:

• 让菜单不是将内容向下推，而是位于内容

• 更新 JS 以将滚动偏移展开菜单的高度

• 更新 JS 以在滚动到 anchor 之前关闭菜单