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

如果您可以在 #navigation.top 样式中设置高度（以 85% 为例），则可以使用 .toggleClass 添加 css 过渡。

#navigation.top {
  top: 85%;
}

过渡

#navigation {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  position: absolute;
  width: 100%;
  height: 100px;
  z-index: 1000;
  top: 0;
  border: 1px solid #333;
}

这是一个小提琴（从以前的答案分叉）。

http://jsfiddle.net/CmbPJ/

Answer 2

是的，您必须在 jquery 代码中编写 if 语句。原因是，您的 jquery 代码将只在第一次工作，它将 div 从底部移动到 div。当您再次单击它时，它仍然会使元素仅移动到顶部。因此，您需要一个 if 语句来计算 div 的当前位置并将其移动到顶部或底部。

$(document).ready(function () {
$('.nav-top').click(function () {
    if($('#navigation').position.top()!=0)
       $('#navigation').animate({ "top": "0" }, 500);
    else
       $('#navigation').animate({ "bottom": "0" }, 500);
})
});

Answer 3

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

http://jsfiddle.net/WkFP2/