Question

我正在使用jQuery mobile，我有一个很长的无序列表：

<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 UI highlight功能。

同样检查这个问题，它有一个很好的解决方案滚动到元素：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');
});

点击它后，如何将列表项滚动到页面顶部？

2 个答案: