有很多类似的问题,但似乎没有一个跟我想要的一样,否则回答都对我没有用。
jsfiddle示例:http://jsfiddle.net/tumblingpenguin/9yGCf/4/
用户将选择一个选项,页面将重新加载并应用他们的选项。我需要的是将“选项列表”DIV滚动到所选选项处,以便它位于选项列表的中心。
HTML内容...
<div id="container">
<a href="#">
<div class="option">
Option 1
</div>
</a>
<!-- other options -->
<a href="#">
<div class="option selected"> <!-- scroll to here -->
Option 4
</div>
<!-- other options -->
<a href="#">
<div class="option">
Option 7
</div>
</a>
</div>
所选的选项标有“selected”类。我需要以某种方式将DIV滚动到“selected”选项。
CSS...
#container {
background-color: #F00;
height: 100px;
overflow-x: hidden;
overflow-y: scroll;
width: 200px;
}
a {
color: #FFF;
text-decoration: none;
}
.option {
background-color: #c0c0c0;
padding: 5px;
width: 200px;
}
.option:hover {
background-color: #ccc;
}
.selected {
background-color: #3c6;
}
我在其他网站上看到过这样的操作,所以我知道这是可能的——只是我不知道从哪里开始。
备注:jQuery 方案也可以接受。