表格向上无缝滚动

HTML

                    <table class="table partentTable">
                    <thead>
                        <tr>
                            <th>始发地</th>
                            <th>目的地</th>
                            <th>公司名称</th>
                            <th>会员类型</th>
                            <th>重货价格</th>
                            <th>轻货价格</th>
                            <th>时效</th>
                            <th>发货</th>
                        </tr>
                    </thead>
                    </table>
                    <table class="table myscroll1 myscroll">
                        <thead>
                        <tr>
                            <th>始发地</th>
                            <th>目的地</th>
                            <th>公司名称</th>
                            <th>会员类型</th>
                            <th>重货价格</th>
                            <th>轻货价格</th>
                            <th>时效</th>
                            <th>发货</th>
                        </tr>
                    </thead>
                    <tbody class="message_list1">
                        <tr>
                            <td>浙江 杭州</td>
                            <td>山东</td>
                            <td>济南山东湘达货运有限公司</td>
                            <td>vip会员</td>
                            <td>300元/吨</td>
                            <td>100元/吨</td>
                            <td>不详</td>
                            <td><a href="" class="btn btn-primary">发货</a></td>
                        </tr>
                        <tr>
                            <td>浙江 杭州</td>
                            <td>山东</td>
                            <td>济南山东湘达货运有限公司</td>
                            <td>vip会员</td>
                            <td>300元/吨</td>
                            <td>100元/吨</td>
                            <td>不详</td>
                            <td><a href="" class="btn btn-primary">发货</a></td>
                        </tr>
                        <tr>
                            <td>浙江 杭州</td>
                            <td>山东</td>
                            <td>济南山东湘达货运有限公司</td>
                            <td>vip会员</td>
                            <td>300元/吨</td>
                            <td>100元/吨</td>
                            <td>不详</td>
                            <td><a class="btn btn-default active" disabled="disabled">已抢</a></td>
                        </tr>
                        <tr>
                            <td>浙江 杭州</td>
                            <td>山东</td>
                            <td>济南山东湘达货运有限公司</td>
                            <td>vip会员</td>
                            <td>300元/吨</td>
                            <td>100元/吨</td>
                            <td>不详</td>
                            <td><a href="" class="btn btn-primary">发货</a></td>
                        </tr> 
                         <tr>
                            <td>浙江 杭州</td>
                            <td>山东</td>
                            <td>济南山东湘达货运有限公司</td>
                            <td>vip会员</td>
                            <td>300元/吨</td>
                            <td>100元/吨</td>
                            <td>不详</td>
                            <td><a href="" class="btn btn-primary">发货</a></td>
                        </tr>
                        <tr>
                            <td>浙江 杭州</td>
                            <td>山东</td>
                            <td>济南山东湘达货运有限公司</td>
                            <td>vip会员</td>
                            <td>300元/吨</td>
                            <td>100元/吨</td>
                            <td>不详</td>
                            <td><a href="" class="btn btn-primary">发货</a></td>
                        </tr>
                        <tr>
                            <td>浙江 杭州</td>
                            <td>山东</td>
                            <td>济南山东湘达货运有限公司</td>
                            <td>vip会员</td>
                            <td>300元/吨</td>
                            <td>100元/吨</td>
                            <td>不详</td>
                            <td><a class="btn btn-default active" disabled="disabled">已抢</a></td>
                        </tr>
                        <tr>
                            <td>浙江 杭州</td>
                            <td>山东</td>
                            <td>济南山东湘达货运有限公司</td>
                            <td>vip会员</td>
                            <td>300元/吨</td>
                            <td>100元/吨</td>
                            <td>不详</td>
                            <td><a href="" class="btn btn-primary">发货</a></td>
                        </tr>  
                    </tbody>
                </table>

JS

//第一个参数表头class，第二个参数tbody的class，第三个参数可以设置不同的表单来进行滚动
topscroll("myscroll1", "message_list1", "list1");
topscroll("myscroll2", "message_list2", "list2");
topscroll("myscroll3", "message_list3", "list3");
topscroll("myscroll4", "message_list4", "list4");
function topscroll(partent, child, mymarquee) {   
//遍历表头给表头一个和td一样的宽度 
    $(".partentTable").find('th').each(function (i) {
        $(this).css('width', $('.' + partent).find('td:eq(' + i + ')').width());
    });

    function Marquee() {
        var lists = $("." + child + " tr");
//判断向上滑动的marginTop是否等于td的高度
        if (Math.abs(parseInt($("." + partent).css("margin-top"))) == $(".message_list1 tr").height()) {
//将第一个tr复制下来添加到最后
            lists.eq(0).clone().appendTo("." + child);
//删除第一个tr
            lists.eq(0).remove();
//将marginTop的值重置为0
            $("." + partent).css("marginTop", "0px");
        } else {
//margin每次减1个像素
            $("." + partent).css({ "marginTop": "-=1px" });
        }
    }
//设置一个循环执行，并且将其赋给一个变量
    mymarquee = setInterval(function () {
        Marquee();
    }, 100);
//当鼠标移到表格区域事件
    $("." + child).hover(function () {
        clearInterval(mymarquee);
    }, function () {
//移除时一定要清除循环
        clearInterval(mymarquee);
//将新的循环赋给变量
        mymarquee=setInterval(Marquee, 100);
    }); 
}