Javascript 使用jquery或js在实时聊天中生成底部滚动条

我很难在实时聊天结束时生成动画

我试过：

document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;

但是没有结果，我的聊天html代码是：

<div id="panel" class="panel">
                <!--Widget body-->
                <div id="chat-body" class="collapse in">
                    <div class="nano has-scrollbar" id="scrollbar" style="height:380px">
                        <div class="nano-content pad-all" tabindex="0" style="right: -17px;">
                            <ul class="list-unstyled media-block">
                                <li class="mar-btm" id="conversation">

                                </li>
                            </ul>
                        </div>
                        <div class="nano-pane"><div class="nano-slider" style="height: 141px; overflow: auto"></div></div></div>

                    <!--Widget footer-->
                    <div class="panel-footer" style="background-color: transparent!important; max-height: 20%;">
                        <form id="send_message">
                            <div class="row">
                                <div class="youplay-input col-xs-7 col-sm-8 text-center" style="margin-left: 4%">
                                    <input type="text" id="message" placeholder="Enter your message">
                                </div>
                                <div class="col-xs-4 col-md-3">
                                    <button class="btn btn-success btn-sm btn-block" type="submit">Send</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

发送

我将元素附加到：

并使用此模板：

---

非常感谢您的回复。

我想您应该使用.nano content，因为它包含您的ul和项目：

var chat = $('.nano-content');
chat.scrollTop(chat.prop('scrollHeight'));

或者，如果您想对卷轴感兴趣并制作动画：

chat.animate({scrollTop:chat.prop('scrollHeight')});

---

我认为您希望使用.nano内容，因为它包含您的ul和项目：

var chat = $('.nano-content');
chat.scrollTop(chat.prop('scrollHeight'));

或者，如果您想对卷轴感兴趣并制作动画：

chat.animate({scrollTop:chat.prop('scrollHeight')});

解决者：

 var chat = $('.nano-content');
 var chatItems = $('.mar-btm').length;
 chat.animate({scrollTop: (chat.prop('scrollHeight') * chatItems)});

非常感谢@nfreeze

解决方法：

 var chat = $('.nano-content');
 var chatItems = $('.mar-btm').length;
 chat.animate({scrollTop: (chat.prop('scrollHeight') * chatItems)});

---

非常感谢@nfreeze

我尝试了这段代码，但这是生成一个滚动到聊天顶部的代码：（它为我滚动到底部。请尝试动画版本。使用chat.animate（{scrollTop:chat.prop（'scrollHeight'）））；这个滚动稍微向下一个大的固定数字：chat.animate（{scrollTop:2000}）；由于某些原因，scrollHeight无法正确返回给您。您可以尝试在添加消息和使用SetTimeOut滚动之间放置一个小延迟。我尝试了此代码，但这是生成一个滚动到聊天顶部的滚动：（它为我滚动到底部。请尝试动画版本。使用chat.animate（{scrollTop:chat.prop（'scrollHeight'）}）；此向下滚动一点，一个较大的固定数字，请：chat.animate（{scrollTop:2000}）；由于某些原因，scrollHeight无法正确返回给您。您可以尝试在添加消息和使用setTimeout滚动之间放置一个小延迟