How do I scroll a list item to the top of my page when I click on it?

Question

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?

score 0 · Accepted Answer · edited May 23 '17 at 11:48

0

Check out $.scrollTo() plugin and the jQuery UI highlight function.

Check this question also, it has a nice solution to scroll to elements: jQuery scroll to element

http://demos.flesler.com/jquery/scrollTo/

http://docs.jquery.com/UI/Effects/Highlight

edited May 23 '17 at 11:48

Community

1
1

answered Jan 09 '13 at 15:33

Derk Arts

3,432
2
18
36

A. Magalhães · Answer 2 · 2013-01-10T12:04:37.787

0

Try this:

$('a').click(function(){
    $("#scroller").css('top','0');
});

edited Jan 10 '13 at 12:04

answered Jan 09 '13 at 16:17

A. Magalhães

1,511
2
22
31

That scrolls the browser scroll bar fine, but I have my own scroll bar inside the page that I want to scroll. I tried `$('a').click(function(){ $("#scroller").scrollTop(0); });` but i got nothing. Thanks for trying. – Squirrl Jan 09 '13 at 16:42
Ok. I thought you was used auto scroll. Try this `$('a').click(function(){ $("#scroller").css('top','0'); });` – A. Magalhães Jan 09 '13 at 16:46

How do I scroll a list item to the top of my page when I click on it?

2 Answers2