Jquery mobile jqm中的自动滚动网格

我有一个简单的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);
    });
});

$（document）.on（'pageinit'，'#page home'，function（）{
$（'button'）。在（'click'，function（）上{
变量表=$（“#main”）；
var blocka=$（'One'）；
var blockb=$（'Two'）；
var blockc=$（'Three'）；
A区。附录（表）；
B区。附录（表）；
块C.附录（表）；
});
});

现在我有一个问题，如果添加了更多的行（比如10行），那么最后一行就会从屏幕上消失。 是否有一种简单的方法可以在每次创建新行时自动滚动到最后一行？ 我知道我可以通过调用table.find（'.ui-block-a:last'）来获取元素，但我不知道如何滚动到找到的元素

---

提前谢谢

如本答案所示：

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

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

这里是小提琴演示：