Question

我想要的行为是：点击顶部按钮，向下滚动到底部div并分离上面的div。如果然后单击底部div中的按钮，则重新插入分离的元素，滚动到顶部div并分离下面的div。

所以，最后你在div之间有一个动画滚动，其他div被分离/重新插入。

出于某种原因，这对我不起作用。如果您单击此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;
});

CSS

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

好的，所以我玩了代码并提出了这个解决方案

<强> FIDDLE

您似乎尚未初始化t，s和b并将其分配给jQuery(element).detach()而非jQuery(element)本身。所以你以后不能在它们之前添加它们。

动态附加分离的div并滚动到它

1 个答案: