jquery获取当前div中滚动条的位置

今天帮同学解决一个问题~ 需求是酱紫的~

输入完确定后直接跳到表格对应的号码那里，颜色变一下再慢慢颜色变回默认的。

我的思路是酱紫的：

1. 先设个变量 isSearch，在点击按钮时，如果输入框里的内容和列表中的系统号对上了，将它置为false。如果没有对上的，就走最下面的if判断 弹出alert。
2. container是整个表格父级的div，scrollTo是子集具体哪条tr的div。
3. 将table下的所有系统号进行循环，如果有匹配上的，就给它加带背景色的class，500ms后自动去除这个class

js:

<script>
    $('#btn').click(function(){
        var isSearch = true;
        var container = $('.tableBox')
        
        $('table .numId').each(function(){
            if($(this).html() == $('#txt').val()){
                isSearch = false;
                $(this).parent('tr').addClass('bgRed').removeClass('bgDefault');
                setTimeout(function() {
                    $('table tr').addClass('bgDefault').removeClass('bgRed');
                }, 500);

                var scrollTo = $(this).parent('tr');
                container.animate({
                    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
                });
            }
        })
        if(isSearch){
            alert('没有该系统号！')
        }
    })
</script>

html:(随便写的，可以挑着看)

<div style="margin:0 auto;width: 880px;text-align: center;margin-top: 70px;">
    <input type="text" id="txt" />
    <input type="button" value="跳转" id="btn" />
</div>
<div class="tableBox" style="width: 800px; text-align: center;margin: 30px auto;height: 200px;overflow: auto;">
<table class="tableList"  border= "1px" cellspacing=0 cellpadding=0   bordercolor="#d6d6d7">
        
        <tr>
            <th colspan="1"  >系统</th>
            <th colspan="1"  >巡检项目</th>
            <th colspan="1"  >状态显示</th>
            <th colspan="1"  >结果</th>
            <th colspan="1"  >系统</th>
            <th colspan="1"  >巡检项目</th>
            <th colspan="1"  >状态显示</th>
            <th colspan="1"  >结果</th>
        </tr>
        <tr>
            <td colspan="1" class="numId">45678</td>
            <td colspan="1">1</td>
            <td colspan="1">湿度</td>
            <td colspan="1" >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
        </tr>
        <tr>
            <td colspan="1" class="numId">34567</td>
            <td colspan="1">1</td>
            <td colspan="1">湿度</td>
            <td colspan="1" >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
        </tr>
        <tr>
            <td colspan="1" class="numId">12345</td>
            <td colspan="1">1</td>
            <td colspan="1">湿度</td>
            <td colspan="1" >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
        </tr>
        <tr>
            <td colspan="1" class="numId">23456</td>
            <td colspan="1">1</td>
            <td colspan="1">湿度</td>
            <td colspan="1" >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
        </tr>
        <tr>
            <td colspan="1" class="numId">045678</td>
            <td colspan="1">1</td>
            <td colspan="1">湿度</td>
            <td colspan="1" >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
        </tr>
        <tr>
            <td colspan="1" class="numId">034567</td>
            <td colspan="1">1</td>
            <td colspan="1">湿度</td>
            <td colspan="1" >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
        </tr>
        <tr>
            <td colspan="1" class="numId">012345</td>
            <td colspan="1">1</td>
            <td colspan="1">湿度</td>
            <td colspan="1" >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
        </tr>
        <tr>
            <td colspan="1" class="numId">023456</td>
            <td colspan="1">1</td>
            <td colspan="1">湿度</td>
            <td colspan="1" >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
        </tr>
        <tr>
            <td colspan="1" class="numId">0045678</td>
            <td colspan="1">1</td>
            <td colspan="1">湿度</td>
            <td colspan="1" >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
        </tr>
        <tr>
            <td colspan="1" class="numId">0034567</td>
            <td colspan="1">1</td>
            <td colspan="1">湿度</td>
            <td colspan="1" >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
        </tr>
        <tr>
            <td colspan="1" class="numId">0012345</td>
            <td colspan="1">1</td>
            <td colspan="1">湿度</td>
            <td colspan="1" >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
        </tr>
        <tr>
            <td colspan="1" class="numId">0023456</td>
            <td colspan="1">1</td>
            <td colspan="1">湿度</td>
            <td colspan="1" >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
            <td colspan="1">照明</td>
            <td colspan="1"  >1</td>
        </tr>
</table>
</div>

css:

<style type="text/css">
    * {margin: 0px;padding: 0px;}
    #txt{width: 300px;height: 30px;line-height:30px;}
    .tableList{border:1px solid #000;width: 800px; text-align: center;margin: 0px auto;}
    .tableList tr{border:1px solid #000;}
    .tableList tr td{border:1px solid #000;}
    .tableList tr th{border:1px solid #000;text-align: center;}
    .tableList tbody{width: 100%;}
    .bgRed{
        background:red;
        transition:2s;
    }
    .bgDefault{
        background:transparent;
        transition:2s;
    }
</style>

借鉴文档如下：
jquery怎么取到当前div中滚动条的位置
offset() 方法
scrollTop() 方法