css top not working for nested divs_问答_开发者

I have a content div nested within a container div. The content div has lots of input elements. The content is bigger than the container, with overflow:hidden. If I tab through the input elements they automagically scroll into view. However, I can't programmatically set the content div top property, which I need to do ( I just want it to go back to the 'top').

http://jsfiddle.net/SwV9r/32/

If you look at the jsfiddle example, tab through the elements so a scroll occurs, then click 'reset' you'll see it doesn't work. Why not?

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:

$开发者_StackOverflow中文版('#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();
}

I think you're after .scrollTop:

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

See: http://jsfiddle.net/SwV9r/33/

The top CSS property has nothing to do with the scroll offset.

how about this:

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

it will put the focus on the first input so it will jump back

Give a shot to margin-top and position:relative instead of position:absolute and top.

That should do the job.

<!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>