javascript - リスト内の要素までスクロールします (ただし、ページはスクロールしません)。

Question

モーダルポップアップ内にアイテムのリストがあり、オーバーフロー自動で高さが固定され、ID付きの「文字」タイトルがいくつかあります。

<ul id="itemList">
    <div id="c_A">A</div>
    <li>Alpha</li>
    <li>Alpha 2</li>
    <li>Alpha 3</li>
    <div id="c_B">B</div>
    <li>Beta</li>
    <li>Beta 2</li>
    <div id="c_C">C</div>
    <li>Charlie</li>
    <li>Charlie 2</li>
    <li>Charlie 3</li>
    <li>Charlie 4</li>
    <div id="c_D">D</div>
    <li>Dog</li>
    <div id="c_E">E</div>
    <li>Echo</li>
    <div id="c_F">F</div>
    <li>Fox</li>
</ul>

たとえば、高さが 4 つの項目のみを表示するように設定され (例: 高さ: 100px、フォント 18)、残りを表示するにはスクロールする必要があるとします (非常に小さな例で、実際のリストには 100 の項目があります)。

次に、すべての文字を含む別のリストがあります。

<ul id="letterList">
    <li>
        <div class="letterSelector" onclick="ScrollToID('c_A')" id="sc_A">A</div>
    </li>
    <li>
        <div class="letterSelector" onclick="ScrollToID('c_B')" id="sc_B">B</div>
    </li>
    <li>
        <div class="letterSelector" onclick="ScrollToID('c_C')" id="sc_C">C</div>
    </li>
    <li>
        <div class="letterSelector" onclick="ScrollToID('c_D')" id="sc_D">D</div>
    </li>
    <li>
        <div class="letterSelector" onclick="ScrollToID('c_E')" id="sc_E">E</div>
    </li>
    <li>
        <div class="letterSelector" onclick="ScrollToID('c_F')" id="sc_F">F</div>
    </li>
</ul>

もともと、私は使用<a href="#c_A">A</a>していましたが、これはページ全体とモーダルポップアップ「リスト」を一番上にスクロールします。物事が適切な場所になかったため、エラーが発生します。

私がする必要があるのは、アイテム リスト (#itemList) をスクロールすることだけです。ページ全体ではなく、特定のリストだけをスクロールするものはまだ見つかりません。

プロジェクトで jQuery と jQuery UI を使用しています (モーダル ポップアップには、都市用、通り用、番地用の 3 つのタブが含まれています)。