Scroll to element within a list (but not to scroll the page)

Question

I have a list of items within a modal popup, that has a fixed height with overflow auto, and has some 'letter' titles with IDs:

<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>

Lets say for example, the height is set to show just 4 items (e.g. height: 100px; with font 18), and you have to scroll to view the rest (very small example, the actual list has 100s of items).

I then have another list with all the letters:

<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>

Originally, I used <a href="#c_A">A</a> - however this would scroll the whole page as well as the modal pop-ups "list" to the top. Which causes errors as things weren't in the right place.

What I need to do is scroll the item list (#itemList) and nothing else. I've not yet found anything that scrolls just a specific list and not the whole page.

I'm using jQuery and jQuery UI in my project (the modal pop-up contains 3 tabs, one for city, another for street, and another for street number).

score 0 · Answer 1 · edited May 23 '17 at 12:20

You can check this post: Get position/offset of element relative to a parent container? and use that way to get the position of an element in relation to its parent.

Then, you can place the whole list inside a div (with position relative) and set an absolute position to the list.

After that, you can modify your function to animate the list to the position of the desired div inside it. For example, if the second div is 100px top, you can move the whole list to -100px top and then the second div will be the first inside the container.

Hope this helps,

Regards,

Marcelo

Scroll to element within a list (but not to scroll the page)

1 Answers1