Make sure entire dynamically-generated ul and its lis appear above bottom of page
<p>I have a dynamically expanding browse tree.  When the user clicks a dynamically-created li, s/he expands the next UL > LI.  If there is only one selection in the newly-created UL, it automatically forwards to the next level.  When this happens, the items in the 3rd list sometimes display below the bottom of the page.  </p>

<pre><code>&lt;div id="wrapper"&gt;
&lt;ul id="ul-level-one"&gt;
    &lt;li id="1"&gt;Item one&lt;/li&gt;
    &lt;li id="2"&gt;Item two&lt;/li&gt;
    &lt;li id="3"&gt;Item three&lt;/li&gt; [selected]
        &lt;ul id="ul-level-two"&gt;
            &lt;li id="1"&gt;Item A&lt;/li&gt;
                &lt;ul id="ul-level-three"&gt;
                    &lt;li id="1"&gt;Item one&lt;/li&gt;
                    &lt;li id="2"&gt;Item two&lt;/li&gt;
                    &lt;li id="3"&gt;Item three&lt;/li&gt; -- these items fall below page bottom
                    &lt;li id="4"&gt;Item four&lt;/li&gt;
                &lt;/ul&gt;
        &lt;/ul&gt;
    &lt;li id="4"&gt;Item four&lt;/li&gt;
    &lt;li id="5"&gt;Item five&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>I am trying to find a way to ensure that all the items of the ul are displayed.  I tried scrolling the final LI of the most current UL into view, but it does not seem to be working.</p>

<pre><code>$('#ul-level-three li:last').get(0).scrollIntoView();
</code></pre>

<p>Please assist.</p>

<p>KMT</p>
