Question

我有一个简单的webapp，它包含一个包含3列网格的主页面。

<div data-role="content">
    <div class="ui-grid-b" id="main">
    </div>
</div>

在运行时，通过单击按钮，可以使用新行扩展此网格。

$(document).on('pageinit', '#page-home', function() {
    $('button').on('click', function() {
        var table = $('#main');
        var blocka = $('<div class="ui-block-a">One</div>');
        var blockb = $('<div class="ui-block-b">Two</div>');
        var blockc = $('<div class="ui-block-c">Three</div>');
        blocka.appendTo(table);
        blockb.appendTo(table);
        blockc.appendTo(table);
    });
});

现在我遇到的问题是，如果添加更多行（假设为10），那么最后一行将耗尽屏幕。是否有一种简单的方法可以在每次创建新行时自动滚动到最后一行？我知道我可以通过调用table.find（'。ui-block-a：last'）来获取元素，但我不知道如何滚动到找到的元素。

提前致谢！

Answer 1

正如本回答所述：How to go to a specific element on page?

在点击处理程序中的blockc.appendTo（table）之后添加以下内容：

    $('html, body').animate({
        scrollTop: blocka.offset().top + 'px'
    }, 'fast');

以下是小提琴演示： http://jsfiddle.net/ezanker/5ap48/

在jqm中自动滚动网格

1 个答案: