Please implement something like this

chat-messages.js

function loadMoreStuff(callback, options) {

// standard options stuff
var o = Q.extend({
    max: -1,
    limit: 10
}, loadMoreStuff.options, options);

// use streams api
Q.Message.get(publisherId, streamName, o,
function (err) {

    // standard error handling
    var msg;
    if (msg = Q.firstErrorMessage(err)) {
         return callback(msg);
    }

    // use a pipe to wait for all the template rendering to complete
    // look at this technique, it's common for pipes:
    var p = new Q.Pipe(), ordinals = [];
    Q.each(messages, function () {
          // remember to make options in the tool to override things like template names
          Q.Template.render(tool.options.templates.message.name, p.fill(ordinal));

          // make sure the whole ordinals array is prepared before adding pipe handler
          ordinals.push(ordinal);
    },
    
    { ascending: true } // don't trust the server to always return correct order
    
    );

    // finally add a pipe handler and put a 1 to make sure it executes at most once
    p.add(ordinals, 1, function (params) {
         var html = '';
         for (var ordinal in params) {
             html += params[ordinal];
         }
         
         // finally, ready to call the callback!
         callback(null, html);
    });

}));

}







// loading more stuff on scroll to top:

$(window).on('scroll', function () {
   if (window.scrollTop === 0) {
      loadMoreStuff(function (moreStuff) {
         $(moreStuff).prepend(tool.element).activate(function () {
             window.scrollTop = $(moreStuff).outerHeight() - (tool.element).height();
         });
      });
   } 
})