锚标签链接向下滚动太远，但仅在移动设备上

Question

我正在重新设计投资组合网站，并且在网站顶部固定了一个静态栏。 栏中的每个链接都是锚点链接，向下滚动至其相应的ID。 如果以全屏模式查看站点，则定位链接会精确滚动到应去的位置，但是，如果将屏幕调整为移动视图的大小，它们最终会向下滚动太多。

我怀疑这与下面的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以关闭菜单，然后滚动到锚点