jquery - リストアイテムをクリックしたときに、ページの一番上までスクロールするにはどうすればよいですか？

Question

私はjQuerymobileを使用しており、次のような長い順序付けられていないリストがあります。

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

そして、リストアイテムをクリックすると、そのリストアイテムがハイライト表示され、ビューポートの上部、タイトルのすぐ下までスクロールするようにしようとしています。何か案は？

Answer 1

$.scrollTo()プラグインと jQuery UIhighlight関数を確認してください。

この質問も確認してください。要素にスクロールするための優れた解決策があります：jQuery scroll to element

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

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

Answer 2

これを試して：

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