基于 Jquery 的向上滚动动画

前提条件：

1.引用JQuery

2.父级dom position为相对定位（relative 或 absolute）,高度固定，且超出隐藏

3. 滚动dom 样式为绝对定位，top初始为0

 

/*
* 向上滚动动画
* @params id domID
* @params length 行总数
* @params lineHeight 行高
* @params intervaltime  时间间隔
* */
function rollingAction(id,length,lineHeight,intervaltime) {
    let totalTop = 0 - length * lineHeight
    setInterval(function () {
        let beforetop = $("#" + id).css('top').replace('px','')
        let endtop = beforetop - lineHeight
        if (beforetop == totalTop) {
            endtop = 0
        }
        $("#" + id).animate({'top': endtop + 'px'})
    }, intervaltime)
}

#parentEl {
    height: calc(30px * 4);
    overflow-y: hidden;
    position: relative;
}
#childEl {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}