在滚动和单击事件上上下移动 Div？

我想制作一个类似于 chanel.com 的网站，如果向下滚动，一个新的 div 会向上移动到页面顶部。不同的是，在我正在设计的网站上，它也应该在点击时具有相同的效果。在我的网站上，有两个按钮也应该在单击时上下移动同一 div，从而展开和折叠网站的第二部分。

我通过查看 Stack Overflow 上的其他问题找到了这一步，但现在我陷入了困境。我的问题是这样的：第一次我在单击时上下移动 div 时，效果很好。第二次，一切都变得奇怪和紧张。它会弹回来，无需上下滚动。

我已经制作了我的网站的简化版本这里有一个 jsFiddle http://jsfiddle.net/nadyalev/e8jjJ/3/，以防任何人都可以更轻松地修改代码。

如果有人能帮助我解决这个问题，我将不胜感激！这是我的代码：

var ovf, slider;

$(function(){
    ovf = this.getElementById("signUp");
    slider = this.getElementById("intro");
    winResize();
    $(window).bind({resize: winResize, scroll: winScroll});

});

function winResize(){   
    ovf.style.top = slider.offse## Heading ##tHeight + "px";
}

function winScroll(){
var op = 1 - ($(document).scrollTop() / slider.offsetHeight);
}

$(document).ready(function(){
    $("#scrollDown a").live('click',function(e){
       console.log('test');
       $('#signUp').animate({
    top: '0',
  }, 500, function() {
    // Animation complete.
  });

    });
});

$(document).ready(function(){
    $("#scrollUp a").live('click',function(e){
       console.log('test');
       $('#signUp').animate({
    top: '99%',
  }, 500, function() {
    // Animation complete.
  });

    });
});

这是一个工作jsFiddle http://jsfiddle.net/e8jjJ/4/.

你需要改变你的0 to 0%在你的里面scrollDown event.

function winScroll(){
var op = 1 - ($(document).scrollTop() / slider.offsetHeight);
}

$(document).ready(function(){
    $("#scrollDown a").live('click',function(e){
       console.log('test');
       $('#signUp').animate({
    top: '0%',
  }, 500, function() {
    // Animation complete.
  });

    });
});

$(document).ready(function(){
    $("#scrollUp a").live('click',function(e){
       console.log('test');
       $('#signUp').animate({
    top: '100%',
  }, 500, function() {
    // Animation complete.
  });

    });
});