想实现这样的一个功能，点击子元素，让元素滚动至指定位置，怎么实现呢？
在代码实现之前，先了解下相关关键点。
1、scrollHeight 属性
通过 scrollHeight 属性可获得子元素的滚动高度，因此，子元素的总滚动高度等于每个子元素的 scrollHeight 之和。
2、scrollTop 属性
父元素的scrollTop的最大值，等于子元素的总滚动高度减去父元素的高度。
3、获取当前元素的滚动高度
在此例中，子元素都是li标签，于是，可通过获取 index，再配合 scrollHeight 求得子元素的 scrollTop 值。
4、滚动至指定位置
通过设置父元素的scrollTop的值等于子元素求得的scrollTop，即可使子元素滚动至父元素顶端。在本例中，我想滚动至中间位置，即减去3个子元素 scrollHeight 即可。
效果图
效果图
html代码：
<ul class="xq-time-picker-hour">
<li>01</li>
<li>02</li>
<li>03</li>
<!-- 省略的内容 -->
<li>21</li>
<li>22</li>
<li>23</li>
</ul>
js代码
$(`#${TimePickerID} .${Prefix}time-picker-body`).on("click", "li", function () {
let scrollNum = 3;
let index = $(this).index();
let scrollHeight = this.scrollHeight;
$(this).parent().animate({
scrollTop: scrollHeight * index - scrollHeight * scrollNum
}, 300);
});
大功告成
