Question

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

这是指向fiddle

的链接

<a href="top" class="nav__trigger"><span class="nav__icon"></span></a>
        <div> 
           <nav class="nav" id="nav">
            <ul class="nav__list" style="font-size:2.5em">
              <li class="nav__item"><a class="nav__link" href="#info">Info</a></li>
              <li class="nav__item"><a class="nav__link" href="#contact">Contact</a></li>
              <li class="nav__item"><a class="nav__link" href="#blog">Blog</a></li>
              <li class="nav__item"><a class="nav__link" href="#">Shop</a></li>
            </ul>
          </nav>
      </div>

Answer 1

尝试使用此脚本。将它放在元素的click事件中

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

Answer 2

如何更改以下内容：

.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;

}

使用绝对位置并显示无，然后在激活时启用显示，以便在页面上的任何位置都可以使用的简单解决方案，而无需将用户滚动回去。链接到小提琴https://jsfiddle.net/6exhg63d/1/

无法一直跳到页面顶部

2 个答案: