Javascript 无法一直跳到页面显示的顶部

我有一个汉堡包菜单图标，点击时可以切换导航列表。导航列表显示在页面顶部。当我滚动到页面底部并单击图标时，我想跳到导航所在的页面顶部，但是，我无法一直跳到页面顶部。除了使用javascript和jquery以编程方式跳转到顶部之外，我还尝试使用锚标记跳转到顶部的div id，如我的示例中所示。我如何才能一直跳到导航的顶部，或者显示导航，使其占据屏幕的活动部分并可以使用

这里有一个链接到

尝试使用此脚本。将其放入元素的单击事件中

$('#element').click(function(){    
    $('html,body').animate({ scrollTop: $('#app_usage_title').offset().top }, 'slow');
});

---

将以下内容更改为：

.nav {
  z-index: 100;
  opacity: 0;
  -webkit-transition-property: all;
          transition-property: all;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}
.nav--active .nav {
  opacity: 1;
  background-color: #000;

}

致：

---

通过使用position absolute（绝对位置）和display none（无显示），然后在激活时启用显示，以获得一个简单的解决方案，该解决方案将在页面上的任何位置工作，而无需将用户滚动回页面。链接到fiddle

返回顶部图标的代码在哪里？

.nav {
  z-index: 100;
  opacity: 0;
  -webkit-transition-property: all;
          transition-property: all;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}
.nav--active .nav {
  opacity: 1;
  background-color: #000;

}

.nav {
  z-index: 100;
  position:absolute;
  display:none;
  -webkit-transition-property: all;
          transition-property: all;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}
.nav--active .nav {
  display:block;
  background-color: #000;

}