I'm using jQuery mobile and I have a long unordered list like this:
<div id="wrapper" />
<div id="scroller" />
<div class="trans" />
<ul id="thelist" data-corners="false"
<div class="theListItem" data-role="collapsible-set" data-collapsed="false">
<div data-role="collapsible" class="my-collapsible" data-collapsed="false" data-theme="a" data-iconpos="right">
<h3>$111.58 - 10/30/2012 - McDonalds Restaurant - Chicago Il</h3>
<div data-role="controlgroup" data-type="horizontal">
<a class="green" href="categorize.html" data-transition="slide" data-direction="reverse" data-role="button">Yes</a>
<a class="red" href="#" data-role="button">Not deductible</a>
<a class="blue" href="IDontKnow.html" data-transition="slide" data-role="button">I don't know</a>
</div>
<div data-role="collapsible" class="my-collapsible" data-collapsed="false" data-theme="a" data-iconpos="right">
<h3>$111.58 - 10/30/2012 - McDonalds Restaurant - Chicago Il</h3>
<div data-role="controlgroup" data-type="horizontal">
<a class="green" href="categorize.html" data-transition="slide" data-direction="reverse" data-role="button">Yes</a>
<a class="red" href="#" data-role="button">No</a>
<a class="blue" href="IDontKnow.html" data-transition="slide" data-role="button">I don't know</a>
</div>
<div data-role="collapsible" class="my-collapsible" data-collapsed="false" data-theme="a" data-iconpos="right">
<h3>$111.58 - 10/30/2012 - McDonalds Restaurant - Chicago Il</h3>
<div data-role="controlgroup" data-type="horizontal">
<a class="green" href="categorize.html" data-transition="slide" data-direction="reverse" data-role="button">Yes</a>
<a class="red" href="#" data-role="button">No</a>
<a class="blue" href="IDontKnow.html" data-transition="slide" data-role="button">I don't know</a>
</div>
</div>
</ul>
</div>
</div>
</div>
And, I'm trying to make it so that when I click on any list item, that list item highlights and scrolls to the top of my viewport, just underneath the title. Any ideas?