通过scrollTop，使子元素滚动至指定位置

想实现这样的一个功能，点击子元素，让元素滚动至指定位置，怎么实现呢？

在代码实现之前，先了解下相关关键点。

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);
});

大功告成

原文链接: https://www.jianshu.com/p/2a8136853eb8