在滾動和點擊事件上向上和向下移動Div？

Question

我想創建一個類似於chanel.com的網站，如果向下滾動，新的div會移動到頁面的頂部。不同的是，在我設計的網站上，點擊也應該具有相同的效果。在我的網站上，有兩個按鈕可以在點擊時上下移動同一個div，展開和摺疊網站的第二部分。

我通過查看堆棧溢出的其他問題得到了這個，但現在我卡住了。我的問題是這樣的：我第一次在點擊上下移動div時，它工作正常。第二次，這一切都很奇怪和跳躍。它快速回滾，無需上下滾動。

我在a jsFiddle here中製作了我的站點的簡化版本，以防止任何人修改代碼。

如果有人能幫助我解決這個問題，將不勝感激！這裏是我的代碼：

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. 
    }); 

    }); 
}); 

Answer 1

這是一個工作jsFiddle。

您需要在scrollDown事件中將您的0更改爲0%。

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. 
    }); 

    }); 
});