jqueryプルダウンで選択した値をもとにスクロールをさせる

– by

下記画像のようにスクロールのある表データがあり、プルダウンで選択した場合に指定された箇所まで移動したいという画面を仕事で実装していました。jqueryには.animate()というメソッドとscrollTopがあるのでこの2つを使って実装してみました。そのときのテスト用scriptをメモ

image

サンプル

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>scroll sample</title>
     <script src="./index_files/jquery-1.10.1.min.js"></script>
<style type="text/css">
    .A { background-color:#ffcccc; }
    .B { background-color:#ccffff; }
    .C { background-color:#ffe6cc; }
    .D { background-color:#cce6ff; }
    .E { background-color:#ffffcc; }
    body {
        width: 600px;
    }    
    div {
        width: 400px;
        height: 150px;
        margin-bottom: 1.5em;
        background-color: #ffffff;
        border: 1px #c0c0c0 solid;
        color: #000000;
        overflow-y: scroll;
        overflow-x: hidden; 
    }
    select {
        width: 150px;
        float: right;
    }
    table {
        float: left;
    }
</style>
<script>

$(function(){

    $("select").change(function(){
        var arr = ['A','B','C','D','E'];
        // 一個のあたりの高さを割りだす。
        var takasa = $("td.B").offset().top - $("td.A").offset().top;
        // 一個のあたりの高さ×要素のインデックスで各アルファベット画面からの高さを割り出し、scrollTopで移動させる。
        $(".scroll").animate({scrollTop: (takasa * $.inArray($(this).val(), arr))}, 'quart');
    });

});

</script>
</head>
<body>
<select>
    <option class="A" value="A">A</option>
    <option class="B" value="B">B</option>
    <option class="C" value="C">C</option>
    <option class="D" value="D">D</option>
    <option class="E" value="E">E</option>
</select>
<div class="scroll">
    <table class="table">
        <tbody>
            <tr>
                <td class="A">A</td>
                <td>
                    <table class="table">
                        <tbody>
                            <tr>
                                <th>データ１</th>
                                <td><input type="text"/></td>
                            </tr>
                            <tr>
                                <th> データ2</th>
                                <td><input type="text"/></td>
                            </tr>
                            <tr>
                                <th> データ2</th>
                                <td><input type="text"/></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td class="B">B</td>
                <td>
                    <table class="table">
                        <tbody>
                            <tr>
                                <th>データ１</th>
                                <td><input type="text"/></td>
                            </tr>
                            <tr>
                                <th> データ2</th>
                                <td><input type="text"/></td>
                            </tr>
                            <tr>
                                <th> データ2</th>
                                <td><input type="text"/></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td class="C">C</td>
                <td>
                    <table class="table">
                        <tbody>
                            <tr>
                                <th>データ１</th>
                                <td><input type="text"/></td>
                            </tr>
                            <tr>
                                <th> データ2</th>
                                <td><input type="text"/></td>
                            </tr>
                            <tr>
                                <th> データ2</th>
                                <td><input type="text"/></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td class="D">D</td>
                <td>
                    <table class="table">
                        <tbody>
                            <tr>
                                <th>データ１</th>
                                <td><input type="text"/></td>
                            </tr>
                            <tr>
                                <th> データ2</th>
                                <td><input type="text"/></td>
                            </tr>
                            <tr>
                                <th> データ2</th>
                                <td><input type="text"/></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td class="E">E</td>
                <td>
                    <table class="table">
                        <tbody>
                            <tr>
                                <th>データ１</th>
                                <td><input type="text"/></td>
                            </tr>
                            <tr>
                                <th> データ2</th>
                                <td><input type="text"/></td>
                            </tr>
                            <tr>
                                <th> データ2</th>
                                <td><input type="text"/></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>

        </tbody>
    </table>
</div>
</body>
</html>