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

时间:2013-01-09 15:31:30

标签: jquery jquery-mobile scroll focus scrollview

我正在使用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>

而且,我正在尝试这样做,以便当我点击任何列表项时,该列表项突出显示并滚动到我的视口顶部,就在标题下方。有任何想法吗?

2 个答案:

答案 0 :(得分:0)

查看$.scrollTo()插件和jQuery UI highlight功能。

同样检查这个问题,它有一个很好的解决方案滚动到元素:jQuery scroll to element

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

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

答案 1 :(得分:0)

试试这个:

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