✔ UL LI In einem Scrollbarem DIV zu einer ID Scrollen

Thomas_Jung

Thomas_Jung

Erfahrenes Mitglied
Hallo,

ich habe ein Scrollbares Div und möchte in diesem Div zu einer ID Scrollen.

Dieses funktioniert so weit, aber es scrollt nicht zu einer ID :(

Javascript: 
$('#sortable').scrollTop($('#sortable li:nth-child(5)').position().top);

HTML: 
<ul id="sortable" style="width:100%;  height:340px;  overflow:auto;" class="ui-sortable">
<li class="ui-state-default" id="item_5" data-id="5"></li>
<li class="ui-state-default" id="item_1" data-id="1"></li>
<li class="ui-state-default" id="item_2" data-id="2"></li>
<li class="ui-state-default" id="item_8" data-id="8"></li>
<li class="ui-state-default" id="item_3" data-id="3"></li>
<li class="ui-state-default" id="[B]item_7[/B]" data-id="7"></li>
<li class="ui-state-default" id="item_4" data-id="4"></li>
<li class="ui-state-default" id="item_10" data-id="10"></li>
<li class="ui-state-default" id="item_9" data-id="9"></li>
<li class="ui-state-default" id="item_6" data-id="6"></li>



</ul>


Nun möchte ich das es zu der ID "item_7" scrollt.
Wie muss ich diese Version abändern?
Javascript: 
$('#sortable').scrollTop($('#sortable li:nth-child(10)').position().top);

Gruß Thomas
 
Ich habe das mit dieser Testdatei untersucht:
Code: 
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset=utf-8>
    <title>Scroll To Element</title>
    <style>
        body {
            margin: 20px;
        }

        #sortable {
            display: flex;
            flex-direction: column;
            border: 2px solid blue;
            position: relative;
        }


        #sortable li {
            border: 2px solid lightblue;
            flex: 0 0 200px;
        }
    </style>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

<body>
    <ul id="sortable" style="width:100%;  height:340px;  overflow:auto;" class="ui-sortable">
        <li class="ui-state-default" id="item_5" data-id="5">Item 5</li>
        <li class="ui-state-default" id="item_1" data-id="1">Item 1</li>
        <li class="ui-state-default" id="item_2" data-id="2">Item 2</li>
        <li class="ui-state-default" id="item_8" data-id="8">Item 8</li>
        <li class="ui-state-default" id="item_3" data-id="3">Item 3</li>
        <li class="ui-state-default" id="item_7" data-id="7">Item 7</li>
        <li class="ui-state-default" id="item_4" data-id="4">Item 4</li>
        <li class="ui-state-default" id="item_10" data-id="10">Item 10</li>
        <li class="ui-state-default" id="item_9" data-id="9">Item 9</li>
        <li class="ui-state-default" id="item_6" data-id="6">Item 6</li>
    </ul>
    <script>
        $('#sortable').scrollTop($('#item_7').position().top);
    </script>
</body>

</html>
Ergebnis: Es funktionierte zunächst nicht richtig, von dem betr. Element war oben immer etwas abgeschnitten. Es hatte den Anschein, dass die Position relativ zum body berechnet wurde statt zum Elternelement ul. Stackoverflow lieferte dann die Lösung:
Get position/offset of element relative to a parent container?
the nearest parent element with a position of relative or absolute
Zum Vergrößern anklicken....
Also position: relative; zum ul hinzu gefügt und alles war gut, es wird exakt zu dem gewünschten Element gescrollt.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück