页面上有窗口滚动条和div滚动条，如何获取div滚动条，且操作它滚动？

[卿柠]

如图所示，窗口有一个滚动条，div也有一个滚动条，
想要点击图中的小红点，然后左侧列表中对应的数据滚动到第一条的位置，该怎么滚动？

[卿柠]

求高手指教啊！

[码无边]

这个百度api 有相应的文档吧

[卿柠]

引用 1 楼 zy205817 的回复:

这个百度api 有相应的文档吧

点击小红点的事件我已经加了，我现在只是想要实现div里的数据滚动，只是不知道怎么让左侧的数据滚动到第一条的位置，就像window.scrollTo(100,500);这种是窗口滚动，不能定位到div的滚动，只想让div里的滚动该如何写呢？

[傲雪星枫]

scrollTop() 定义和用法 scrollTop() 方法设置或返回被选元素的【垂直滚动条位置】。 Note： 当滚动条位置位于最顶部时，位置是0； 当用于返回位置时： 该方法返回 第一个匹配元素的滚动条的垂直位置。 当用于设置位置时： 该方法设置 所有匹配元素的滚动条的垂直位置。

[卿柠]

引用 4 楼 fdipzone 的回复:

scrollTop() 定义和用法 scrollTop() 方法设置或返回被选元素的【垂直滚动条位置】。 Note： 当滚动条位置位于最顶部时，位置是0； 当用于返回位置时： 该方法返回 第一个匹配元素的滚动条的垂直位置。 当用于设置位置时： 该方法设置 所有匹配元素的滚动条的垂直位置。

非常感谢您的指教！ 用scrollTop()可以使不处于顶端的滚动条回到顶端，但是像我图中那样，滚动条处于顶端，而第四条数据是看不到的，那么我在点击第四个小红点的时候，如何将第四条数据滚动到列表顶端显示？

[天际的海浪]

引用 5 楼 yuao_708905482 的回复:

[quote=引用 4 楼 fdipzone 的回复:] scrollTop() 定义和用法 scrollTop() 方法设置或返回被选元素的【垂直滚动条位置】。 Note： 当滚动条位置位于最顶部时，位置是0； 当用于返回位置时： 该方法返回 第一个匹配元素的滚动条的垂直位置。 当用于设置位置时： 该方法设置 所有匹配元素的滚动条的垂直位置。

非常感谢您的指教！ 用scrollTop()可以使不处于顶端的滚动条回到顶端，但是像我图中那样，滚动条处于顶端，而第四条数据是看不到的，那么我在点击第四个小红点的时候，如何将第四条数据滚动到列表顶端显示？[/quote] <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面名称</title> <style type="text/css"> #aa { position: relative; overflow: scroll; width: 200px; height: 300px; border: 1px solid #000; } </style> </head> <body> <div id="aa"> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> <p>08</p> <p>09</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p> <h3 id="xx">xxxxxxxxxx</h3> <p>19</p> <p>20</p> <p>21</p> <p>22</p> <p>23</p> <p>24</p> <p>25</p> <p>26</p> <p>27</p> <p>28</p> <p>29</p> <p>30</p> </div> <input type="button" value="滚动到xxxxxx" onclick="st()" /> <script type="text/javascript"> function st() { var s = document.getElementById("xx").offsetTop; document.getElementById("aa").scrollTop = s; } </script> </body> </html>

[卿柠]

引用 6 楼 jslang 的回复:

[quote=引用 5 楼 yuao_708905482 的回复:]
[quote=引用 4 楼 fdipzone 的回复:]
scrollTop() 定义和用法
scrollTop() 方法设置或返回被选元素的【垂直滚动条位置】。

Note：

当滚动条位置位于最顶部时，位置是0；
当用于返回位置时：
该方法返回 第一个匹配元素的滚动条的垂直位置。
当用于设置位置时：
该方法设置 所有匹配元素的滚动条的垂直位置。

非常感谢您的指教！

用scrollTop()可以使不处于顶端的滚动条回到顶端，但是像我图中那样，滚动条处于顶端，而第四条数据是看不到的，那么我在点击第四个小红点的时候，如何将第四条数据滚动到列表顶端显示？[/quote]

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面名称</title>
<style type="text/css">
#aa {
position: relative;
overflow: scroll;
width: 200px;
height: 300px;
border: 1px solid #000;
}
</style>
</head>
<body>

<div id="aa">
<p>01</p>
<p>02</p>
<p>03</p>
<p>04</p>
<p>05</p>
<p>06</p>
<p>07</p>
<p>08</p>
<p>09</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<h3 id="xx">xxxxxxxxxx</h3>
<p>19</p>
<p>20</p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p>30</p>
</div>
<input type="button" value="滚动到xxxxxx" onclick="st()" />
<script type="text/javascript">
function st()
{
var s = document.getElementById("xx").offsetTop;
document.getElementById("aa").scrollTop = s;
}
</script>
</body>
</html>
[/quote]

非常感谢您的指教！

这种方法就是我想要的效果，但是从图中可以看到，我这边的数据列表和列表中的滚动条都不是从页面顶端就开始的，它们的位置已经有了一个起始位置，那么在取得数据的top位置的时候：var s = document.getElementById("xx").offsetTop;，直接赋给滚动条的scrollTop：document.getElementById("aa").scrollTop = s;，显然就不对了。。。

如图描述：



所以在此求教滚动条移动的距离应该怎么计算？

[天际的海浪]

对有滚动条的那个div设置position: relative; 就如我的例子那样

[卿柠]

引用 8 楼 jslang 的回复:

对有滚动条的那个div设置position: relative; 就如我的例子那样

非常感谢您能帮我解决问题，真的非常感谢！谢谢谢谢谢谢！！！