Focus on the last appended element

Question

I am creating a chat application using signalr. Each time a message is sent, it adds to the "#discussion". The problem is I need to scroll down to see the last inserted message. Can you please help me focus the window on the last element or message inserted.

Where the messages are appended

<ul id="discussion"></ul>

The message to insert

var myHtml = '<div id="msg_typed" class="entry-c">' +
                '<div class="entry-image">' +
                '<div class="panel panel-default" data-animate="fadeInLeft">' +
                '<div class="panel-body">' +
                message +
                '</div>' +
                '</div>' +
                '</div>' +
                '<ul class="entry-meta clearfix">' +
                '<li><i class="icon-comments"></i>' + today + '</li>' +
                '<li><a href="#"><i class="icon-user"></i>' + name + '</a></li>' +
                '</ul>' +
                '</div>' +
                '<br/>';
            $(myHtml).hide().appendTo("#discussion").fadeIn(1000); <==== This is how I insert the message
            var wtf = $('#discussion');
            var height = wtf[0].scrollHeight;
            wtf.scrollTop(height);

I have updated my code to match the duplicate. What am I missing here?