jquery - 如何使用 jQuery 加载 ajax 数据淡入和滚动到最新项目

Question

这几乎可以正常工作，它一次将最新的帖子 3 加载到 #posts div 中。但我似乎无法弄清楚一旦加载新帖子后如何向下滚动[所以它们都是可见的]

// infinite scrolling on homepage
$('.load-more').click(function(e) {

    var $this = $(this);

    var offset = $this.data('offset') + 3;

    var myProperties = {
        snippet: 'infiniteScroll',
        limit: 3,
        offset: offset,
        parents: 22,
        depth: 999,
        sortby: 'publishedon',
        showHidden: 1,
        debug: 1,
        tpl: 'infiniteHomePageTpl'
        };

    $.ajax({
        type: "POST",
        url: "/ajax.processor",
        data: myProperties,
        dataType: "json",

        success: function(response) {

            console.log(response);
            var newposts = response.posts;
            $(newposts).hide().appendTo('#posts').fadeIn(800);;

            if(response.lastpost){
                console.log('nodata');
                $this.attr('disabled', 'disabled');
            }

            // scroll to last posts (not working)
            $('#posts').animate({scrollTop: $('#posts').get(0).scrollHeight}, 300);

            // Update the offset
            $this.data('offset', offset);
        },

        error: function(response){
            console.log(response);
        },

    }).fail(function(jqXHR,textStatus,errorThrown) {
        console.log(errorThrown);
    }); // ajax

}); // load more

我不确定我是否正确理解了 scrollTop 功能，我是否需要将它应用到我正在添加的项目或我正在将它们添加到的容器中？

添加小提琴

Answer 1

用这个

 var post= $('#posts');
  var height = post[0].scrollHeight;
  post.scrollTop(height);

在 Css 中添加此代码

 #posts{
   width: 200px;
   height: 300px;
   overflow-y: scroll;
 }