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

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。如果您只链接到“#”，页面将简单地重新加载。

此链接会跳转到H2上对应的ID

    <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，之后无法对其进行操作。