单击导航链接时如何向下滚动到导航栏

Question

我希望能够在导航栏中的链接单击时自动向下滚动。现在当点击导航栏中的链接时，页面将重新加载并返回到页面的顶部。我使用JQuery隐藏未选择的部分，现在我需要在单击链接时添加滚动方法。或者构建它，以便在选择导航栏链接时，页面将使用新的非隐藏部分重新加载，并且页面向下移动到导航栏。如果可能的话，我希望看到两种方法。

<div id="tab_container"> 
        <nav id="tabs"> 
         <ul id="nav"> 
          <li class="active"><a href="#">About</a></li> 
          <li class="inactive"><a href="#">Services</a></li> 
          <li class="inactive"><a href="#">Our Staff</a></li> 
          <li class="inactive"><a href="#">book</a></li> 
          <li class="inactive"><a href="#">Gift Cards</a></li> 
          <li class="inactive"><a href="#">Reviews</a></li> 
         </ul> 
        </nav> 
       </div> 

Answer 1

您需要提供指向链接的ID。如果你只链接到'＃'，页面将会重新加载。

该链接会跳转到相应的ID在H2

<a href="#mylink">Click to move to ID 'myLink'</a> 

    <h2 id="myLink">My link</h2> 

至于jQuery的，你用.hide()，.toggle()或.remove()？

.hide()does exactly that，但不会从DOM中删除它。

.toggle()switches between visible and invisible。

.remove()实际上deletes your target来自DOM，并且在此之后不能被操纵。