javascript - 将 div 滑动到屏幕顶部

Question

当有人在输入字段中按 Enter 时，我试图让 div 滑动到屏幕顶部。我遇到的问题是，不是 div 从屏幕顶部移动 50px，而是从它所在的 div 顶部移动 50px。

http://jsfiddle.net/rtxu2/

这是真正的代码：

的HTML

<div class="home-nav">
    <div style="display: none;position: absolute;margin-top: -1px" id="search-box">
        <form action="/" method="get"><input type="text" name="q" class="q" /></form>
    </div>
</div>

JavaScript

    $(".q").keydown(function(e){
        if(e.keyCode == 13){
            var val = $(this).val();
            window.location = "#q="+val;
            $(".space").animate({
                width: "100px"
            }, "slow");
            $("#search-box").animate({
                top: "50px"
            }, "slow");
            return false;
        }
    });

CSS

div.home-nav{
    line-height: 4em;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 300px;
    height: 300px;
    margin: auto;
}

我将内部 div 定位为绝对值的原因是，当您单击链接时，div/input 将覆盖链接以产生一点效果。

Answer 1

如果您不希望 .sub 在动画时相对于 .main 定位，请不要将其放在 HTML 中的 .main 内。

http://jsfiddle.net/rtxu2/10/

<div class="main"></div>
<div class="sub">
    <form>
        <input type="text" />
    </form>
</div>

Answer 2

如果您希望将 div 设置为相对于屏幕顶部而不是它所在的 div，请尝试将其设置为固定。

div.home-nav{
    line-height: 4em;
    position: fixed;
    top: 0;
    left: 300px;
    height: 300px;
    margin: auto;
}

Answer 3

好的，我明白了！我所做的是从 div 中删除元素并在有人按下 enter 时将其放置在 body 中。然后我去做动画。如果有人有更好的方法，请发表！

    $(".q").keydown(function(e){
        if(e.keyCode == 13){
            var val = $(this).val();
            var item = $(this).closest("#search-box");
            var left = item.offset().left;
            var top = item.offset().top;

            $(this).closest("#search-box").remove();
            item.css({
                top: top + "px",
                left: left + "px",
                zIndex: 100
            })
            $("body").prepend(item);

            window.location = "#q="+val;
            $(".space").animate({
                width: "100px"
            }, "slow");
            item.animate({
                top: "35px"
            }, "slow");
            return false;
        }
    });