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以关闭菜单，然后滚动到锚点

Anchor Tag链接向下滚动太远但仅限于Mobile

1 个答案: