javascript - jQuery上下滑动

Question

我目前正在做一个网站，我有一个导航栏，我把它放在页面的底部，我想做的是当我点击其中一个按钮时，导航栏会向上滑动到我页面的顶部，当我再次点击同一个按钮时，它会回到原来的位置(页面底部)。

我已经用 JQuery 编写了这段代码，使我的导航栏向上滑动:

jQuery:

$(document).ready(function () {
    $('.nav-top').click(function () {
        $('#navigation').animate({ "top": "0" }, 500);
    })
});

HTML:

<nav id="navigation">
    <div class="logo">
        <a href="#index"><span class="color">B</span>AICA</a>
    </div>
    <div id="menu">
        <ul>
            <li>
                <a href="#" class="nav-top">About me</a>
            </li>
            <li>
                <a href="#" class="nav-top">Portfolio</a>
            </li>
            <li>
                <a href="#" class="nav-top">Contact</a>
            </li>
        </ul>
    </div>
</nav>

CSS:

#navigation {
    background-image: url('../images/header/navigation/bl-opacity50.png');
    *background-image: url(../images/header/navigation/bl-opacity50.png); 
    background-repeat: repeat;
    position: absolute;
    width: 100%;
    height: 100px;
    z-index: 1000;
}

我是否必须编写某种 IF 语句？

编辑:

一切都很好，但是当我尝试制作第二个按钮时，为了让我的导航栏移回我的页面底部，它什么也没做，所以我想要的是一个用于移动导航栏的按钮到页面顶部，以及用于将其移动到页面底部的按钮？

Answer 1

使用 .toggleClass 并在 CSS 中保持定位:

http://jsfiddle.net/WkFP2/