Question

我有以下css和html：

<head>
<style type="text/css">
ul > li {
    position:relative;
    margin:0;
    list-style:none;
    padding:0;
}
ul{
padding:0;
margin:0;
}
</style>
</head>
<body >
<div style="position:absolute;top:40%;width:100;height:50%;border:1px solid red;overflow:auto;offsetTop:10px">
<!--<a onclick='calla()' disabled="disabled">Delete</a>-->
<ul>
<?php
for ($i=0;$i<50;$i++){
?>
<li>Test li_<?php echo $i; ?> 
</li>
<?php
}
?>
</ul>
</div>

上面的代码为div创建了一个垂直滚动条，默认情况下滚动条始终位于顶部。如果我想更改滚动条位置，即。根据我给出的高度在中间或任何地方说（这样可见的li组件也会改变），我该怎么做呢？

非常欢迎使用html / css和javascript（动态）解决方案。

Answer 1

<html>
<head>
<style type="text/css">
ul > li {
    position:relative;
    margin:0;
    list-style:none;
    padding:0;
}
ul{
padding:0;
margin:0;
}

p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }

</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body >
<div class="demo" style="position:absolute;top:40px;width:100;height:60%;border:1px solid gray;overflow:auto;offsetTop:10px">
<!--<a onclick='calla()' disabled="disabled">Delete</a>-->
<ul>
<?php
for ($i=0;$i<50;$i++){
?>
<li>Test li_<?php echo $i; ?></li>
<?php
}
?>
</ul>
</div>
<script>$("div.demo").scrollTop(300);</script>
</body>
</html>

Answer 2

使用jquery的scrollTop（）方法。

请参阅：http://api.jquery.com/scrollTop/

要更改滚动条位置

2 个答案: