今天遇到一个时间弹出框，其高度为固定高度，容器内有时间列表，如下图：

由于时间较多，所以我希望做一个动画效果，方便用户的选择，就是当用户已选择过时间，或者说初始化的时候这个预约时间值就存在，那么我希望这个弹出框内容部分会自动的定位到已选择项。我用的动画效果是直接用的jquery的animate方法,定位用的是scrollTop,代码如下：

$('.time-list-wrap').animate({
      scrollTop:***
},500);

最重要的就是scrollTop后面的value要怎么取值。刚开始的时候，我用的是$('.time-list-wrap li.active').position.top()(已选中的时间段元素),后来发现，这个是无法实现我要的效果的，因为这要分两种情况：1、当已选中的元素在父容器的下方时，也就是$('.time-list-wrap li.active').position.top()值为正数时，scrollTop是可以准确定位的，但是当出现第二种情况，2、当已选中的元素在父容器的上方时，也就是$('.time-list-wrap li.active').position.top()值为负数时，scrollTop是无法准确定位的，它会自动地将父容器定位到顶部状态，也就是如下所示：

      

上图是选中的列表在元素上方，被遮盖，看不见的状态，当再次进入页面的时候，页面会定位成如下页面：

从图中箭头所指，可看到，第一行被排在了第一行，而不是我们想要的被选中的那行排在视图的第一行。然后我去jquery官方文档中查看scrollTop方法,才发现，它只接受正整数值：

     

由此可见当scrollTop的值为负数时，它自动地将值替换为0了。此路不通。但是难道当元素居于父容器的上方，也就是值为负数时，就无法正确定位了吗？于是我用了最笨的方法，模拟元素居于父容器上方位置，直接在谷歌浏览器concole控制台上输入代码：

$('.time-list-wrap').scrollTop(某个正整数值)

大概试了5、6个数值后，我发现，虽然元素在上方，但是，当你直接输入元素相对于父容器顶部的距离值时，不管你是在父容器的上方还是下方，都是可以精准定位的。

写到这，我发现，之所以前面会用错方法，主要是对scrollTop这个方法的理解产生了误区。其实，对于滚动条来说，我不管你上滚到天际何处，还是下拉到地底多深，我只要知道，当文档正常排版时，我的选中元素距离父容器顶部的距离，那么这个值就是我需要定位的值。。。。

------------------ 分割线-----------------------

原本以为这样就可以了，然而。。。后面自测的时候发现还是存在一个问题。就是在手机真机上时，随着选择的时间越往后，滚动的误差就越大，原本以选中的时间应该是排在第一行的，但是有可能会排在第二行，甚至是第三行。

后来才发现，是因为li元素没有设置固定的高度值，我是直接用的padding,将其撑起，后来给li元素加了一行代码这个问题就没有了。height：58px;