Question

我有一个内容div嵌套在容器div中。内容div有很多输入元素。内容大于容器，溢出：隐藏。如果我通过输入元素进行选项卡，它们会自动滚动到视图中。但是，我无法以编程方式设置内容div top属性，我需要这样做（我只想让它回到'顶部'）。

如果您查看jsfiddle示例，请选中元素以进行滚动，然后单击“重置”您将看到它不起作用。为什么不呢？

HTML：

<head>
<style>
#wrapper{width:300px; height:300px; display:block; overflow:hidden; position:relative; z-index:1; border: 1px solid red; }
#content{ width:1000px; height:1000px; vertical-align:top;  z-index:1; display:block; position:absolute; border: 1px solid green;}
#info{ height:100px}
</style>
</head>
<body>
    <div id="info"></div>
<input id="test" type="button" value="Test">
<input id="reset" type="button" value="Reset">
<div id="wrapper">
<div id="content">
    1<input type="text"><br />    2<input type="text"><br />    3<input type="text"><br />    4<input type="text"><br />    5<input type="text"><br />    6<input type="text"><br />    7<input type="text"><br />    8<input type="text"><br />    9<input type="text"><br />    10<input type="text"><br />    11<input type="text"><br />    12<input type="text"><br />    13<input type="text"><br />    14<input type="text"><br />    15<input type="text"><br />    16<input type="text"><br />    17<input type="text"><br />    18<input type="text"><br />
</div>
</div>
</body>

使用Javascript：

$('#test').bind('click',report);
$('#reset').bind('click',reset);

function report(){
    var pos=$('#content').position();
    $('#info').html('pos.top='+pos.top);
}
function reset(){
    //$('#content').css("top","0px"); // Does not work
    //$('#content').css('top',0); // Does not work
    //$('#content').css('top','0px'); // Does not work
    document.getElementById('content').style.top = '0px'; // Does not work
    report();
}

Answer 1

我认为你在.scrollTop之后：

$('#wrapper').scrollTop(0);

请参阅： http://jsfiddle.net/SwV9r/33/

top CSS属性与滚动偏移无关。

Answer 2

怎么样：

function reset(){
  $('#content').children('input').first().focus();
  report();
}

它将把焦点放在第一个输入上，这样它就会跳回来

Answer 3

给予margin-top和position：shot而不是position：absolute和top。

那应该做的。

Answer 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#wrapper{ width:300px; height:300px; border: 1px solid red; }
#content{ width:300px; height:300px; overflow:auto; display:block; border: 1px solid green; }
</style>
<!-- Load jquery -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.2");</script>
<script type="text/javascript">
$(function() {
$('#reset').bind('click',resetit);
});
function resetit(){
$("#content").scrollTop(0);
}  
</script>
</head>

<body>
<input id="reset" type="button" value="Reset">
<div id="wrapper">
<div id="content">
1<input type="text"><br />    2<input type="text"><br />    3<input type="text"><br />    4<input type="text"><br />    5<input type="text"><br />    6<input type="text"><br />    7<input type="text"><br />    8<input type="text"><br />    9<input type="text"><br />    10<input type="text"><br />    11<input type="text"><br />    12<input type="text"><br />    13<input type="text"><br />    14<input type="text"><br />    15<input type="text"><br />    16<input type="text"><br />    17<input type="text"><br />    18<input type="text"><br />
</div>
</div>
</body>
</html>

css top不适用于嵌套div

4 个答案: