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>
精彩评论