분리 div를 동적으로 추가하고 스크롤하십시오.

Question

원하는 동작은 다음과 같습니다. 상단 버튼을 클릭하고 하단 div로 스크롤 한 다음 위의 div를 분리합니다. 하단 div의 버튼을 클릭하면 분리 된 요소를 다시 삽입하고 상단 div로 스크롤 한 다음 아래 div를 분리합니다.

결국 div 사이에는 애니메이션 스크롤이 있고 다른 div는 분리/다시 삽입됩니다.

어떤 이유인지 이것은 나를 위해 작동하지 않습니다. 이 jsfiddle에서 위쪽 링크를 클릭하면 예상대로 동작합니다. 그러나 스크롤 업은 작동하지 않습니다. 분리 된 요소는 다시 삽입되지 않습니다! 내가 도대체 ​​뭘 잘못하고있는 겁니까? 미리 감사드립니다!

jsFiddle

HTML

<div id="w"> 
    <div id="top"> 
     <a href='#bottom' id="scrollDown">Scroll down!</a> 
    </div> 
    <div id="space"></div> 
    <div id="bottom"> 
     <a href="#top" id="scrollUp">Scroll up!</a> 
    </div> 
</div> 

jQuery를

var t; 
var s; 
var b; 

jQuery('#scrollDown').on('click',function(){ 
    var w = jQuery('#w'); 
    if(b){ 
     w.prepend(b); 
     b = null; 
    } 
    if(s){ 
     w.prepend(s); 
     s = null; 
    } 
    var bottomPosition = jQuery('#bottom').position().top; 
    $("html, body").animate({scrollTop:bottomPosition},1000,'swing',function(){ 
     t = jQuery('#top').detach(); 
     s = jQuery('#space').detach(); 
    }); 
    return false; 
}); 

jQuery('#scrollUp').on('click',function(){ 
    var w = jQuery('#w'); 
    if(s){ 
     w.prepend(s); 
     s = null; 
    } 
    if(t){ 
     w.prepend(t); 
     t = null; 
    }  
    $("html, body").animate({scrollTop:0},1000,'swing',function(){ 
     b = jQuery('#bottom').detach(); 
     s = jQuery('#space').detach(); 
    }); 
    return false; 
}); 

그래서이와 코드와 주변 연주와 함께 좋아

div { display:block; } 

#top { 
    height: 500px; 
    width:100%; 
    background-color: #AAA; 
    overflow:hidden; 
} 

#space { 
    height: 1000px; 
    background-color: #336688; 
} 

#bottom { 
    width:100%; 
    height: 500px; 
    background-color: #D0D0D0; 
} 

Answer 1

CSS 솔루션

FIDDLE

당신이 t, s 및 b를 초기화하지 않았 및 jQuery(element).detach()에 할당 된 것으로 보인다 아니라 jQuery(element) 자체. 그래서 당신은 나중에 그들을 prepend 수 없습니다.