diff --git a/share_project/src/main/resources/static/chats.html b/share_project/src/main/resources/static/chats.html
index ef9d4d3377624a86b3ef8e23ecffb75db18f9cbd..289fe9461d58d7cbd395a62c8f23e1191eb2d84a 100644
--- a/share_project/src/main/resources/static/chats.html
+++ b/share_project/src/main/resources/static/chats.html
@@ -92,6 +92,10 @@
 
         <!-- 聊天框 -->
         <div class="chat-content">
+            <div class="unread" v-show="hasUnread">
+                <span @click='scrollBottom'>&nbsp;&nbsp;↓↓ 有新消息未读&nbsp;&nbsp;|</span>
+                <span @click='hideUnreadBtn'>&nbsp;×&nbsp;</span>
+            </div>
             <div class="firend-name">{{currentFriendName}}</div>
             <div class="chat-middle" id="chatContainer" @scroll='scrollHistory($event)'>
                 <!-- <div class="chat-time">
diff --git a/share_project/src/main/resources/static/css/chats.css b/share_project/src/main/resources/static/css/chats.css
index a4064509b76a86b7b036c1587210bfa8ae09e1a9..208db4c51550423d8b9276926e4ac865e787c0bb 100644
--- a/share_project/src/main/resources/static/css/chats.css
+++ b/share_project/src/main/resources/static/css/chats.css
@@ -17,6 +17,7 @@ input:focus {
 /* 遮罩层 也就是加载的时候显示的动画 */
 
 .mask {
+    display: none;
     position: fixed;
     width: 100%;
     height: 100%;
@@ -403,6 +404,7 @@ input:focus {
 /* 右侧对话框 */
 
 .chat-content {
+    position: relative;
     float: left;
     width: 533px;
     height: 529px;
@@ -433,6 +435,38 @@ input:focus {
     padding-top: 13px;
 }
 
+.unread {
+    position: absolute;
+    bottom: 135px;
+    right: 77px;
+    width: 132px;
+    height: 25px;
+    background-color: #fff;
+    text-align: center;
+    border: 1px solid #aaa;
+    cursor: pointer;
+}
+
+.unread span {
+    display: block;
+    float: left;
+    height: 25px;
+    color: #aaa;
+    font-size: 12px;
+    line-height: 25px;
+}
+
+.unread span:last-child {
+    font-size: 20px;
+    width: 27px;
+    text-align: center;
+}
+
+.unread span:hover {
+    background: #ccc;
+    color: #fff;
+}
+
 .chat-middle:hover {
     overflow-y: auto;
 }
diff --git a/share_project/src/main/resources/static/js/page/chat.js b/share_project/src/main/resources/static/js/page/chat.js
index bd448aa8842730e0411cee7997677e791887c4c6..62001e84b92d3236443789807be591ff580b83fe 100644
--- a/share_project/src/main/resources/static/js/page/chat.js
+++ b/share_project/src/main/resources/static/js/page/chat.js
@@ -40,6 +40,8 @@ const app = new Vue({
         msgContent: '',
         // 存储聊天记录的总页数
         totalHistoryNum: 1,
+        // 在查看历史记录的时候有新消息
+        hasUnread: false,
 
 
         // 即时聊天webSokect
@@ -117,17 +119,49 @@ const app = new Vue({
 
                 // 说明不是心跳检测
                 if (event.data != 'pong') {
-                    // setMessageInnerHTML(event.data);
                     // data: "{"sendUser":"admin","content":"hhh","sendTime":1617023867997}"
                     var chatContent = JSON.parse(event.data);
                     console.log(chatContent);
                     // 判断是从哪里发过来的 如果是正在聊天的那个娃 就直接添加到正在聊天的历史记录的数组中
                     if (chatContent.sendUser == this.currentFriendName) {
+                        // 如果文档的高度-折叠起来的高度 == clientHeight 
+                        // 就是没有滚动 直接拉到底部
+                        // 如果文档的高度-折叠起来的高度 > clientHeight+10px 在查看历史记录状态
+                        // else  就是在底部的状态 直接拖到底
+
+                        // 记住当前正在浏览的历史记录的bottom
+                        var scBottom = 0;
+                        var isScanHistory = false;
+                        this.$nextTick(() => {
+                            var container = this.$el.querySelector("#chatContainer");
+                            if (container.scrollHeight - container.scrollTop > container.clientHeight) {
+                                // 表示在查看历史记录  显示按钮  并保持不动
+                                isScanHistory = true;
+                                // 记住当前正在浏览的历史记录的bottom
+                                scBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+                            }
+                        });
+                        console.log(isScanHistory);
+
                         // 将消息放进去对应的数组中
                         // 这里要格式化时间
                         chatContent.sendTime = this.dateFormat(chatContent.sendTime, 'yyyy-mm-dd hh:mm:ss')
                         this.currentChatHistory.push(chatContent);
 
+                        // 放进去之后 根据是否是在浏览历史记录 来做不同的处理
+                        this.$nextTick(() => {
+                            var container = this.$el.querySelector("#chatContainer");
+                            if (isScanHistory) {
+                                // 表示在查看历史记录  显示按钮  并保持不动
+                                container.scrollTop = container.scrollHeight - container.clientHeight - scBottom;
+                                this.hasUnread = true;
+                            } else {
+                                // 表示处于聊天整天 直接拉到底部
+                                container.scrollTop = container.scrollHeight;
+                                this.hasUnread = false;
+                            }
+                        });
+
                         // 设置上一条消息
                         var index = this.friendsList.findIndex(item => {
                             return item.friendName == this.currentFriendName;
@@ -203,6 +237,8 @@ const app = new Vue({
 
             // 清空输入内容框
             this.msgContent = '';
+            // 将历史记录滚动到底部
+            this.scrollBottom();
 
         },
 
@@ -242,12 +278,20 @@ const app = new Vue({
                     console.log(res.data);
                     this.currentChatHistory = res.data.data;
                     this.isMask = false;
-
+                    // 滚动到底部
+                    this.scrollBottom();
                 }
             })
         },
         // 向上滚动获取历史记录
         scrollHistory: async function(event) {
+            var sHeight = 0;
+            this.$nextTick(() => {
+                var container = this.$el.querySelector("#chatContainer");
+                console.log('1');
+                // 记住当前文档的高度
+                sHeight = container.scrollHeight;
+            });
             if (event.target.scrollTop == 0) {
                 // 更新聊天记录
                 // 当前有多少条记录
@@ -257,8 +301,31 @@ const app = new Vue({
                 var history = await axios.get(url);
                 var tempHistory = history.data.data;
                 this.currentChatHistory = tempHistory.concat(this.currentChatHistory);
+                console.log('2');
+
+                this.$nextTick(() => {
+                    var container = this.$el.querySelector("#chatContainer");
+                    // 当前文档总高度-刚刚记录的文档的高度 就是需要被折叠起来的高度
+                    container.scrollTop = container.scrollHeight - sHeight;
+                    console.log('3');
+                });
             }
         },
+        // 聊天记录滚动到底部实现
+        scrollBottom: function() {
+            setTimeout(() => {
+                this.$nextTick(() => {
+                    var container = this.$el.querySelector("#chatContainer");
+                    container.scrollTop = container.scrollHeight;
+                    this.hasUnread = false;
+                });
+            }, 0);
+        },
+
+        // 隐藏显示是否滚动到下面的按钮
+        hideUnreadBtn: function() {
+            this.hasUnread = fasle;
+        },
         // 跟对方建立连接 判断对方是否在线
         getStaus: function(friendName) {
             var url = 'http://zshare.free.idcfengye.com/share/chat/inWindows/' + friendName + '?fromUser=' + this.username;
diff --git a/share_project/src/main/resources/static/js/page/isLogin.js b/share_project/src/main/resources/static/js/page/isLogin.js
index b952a0fba38d370dae6779dd9a1f18a8af90daa0..f5533289f98829aff7065c4d91823b7a1a56eaae 100644
--- a/share_project/src/main/resources/static/js/page/isLogin.js
+++ b/share_project/src/main/resources/static/js/page/isLogin.js
@@ -29,8 +29,6 @@ const header = new Vue({
             }).catch();
         },
 
-
-
         //获取用户的未读信息 TODO 接口需要修改username
         getUnread: function() {
             //判断是否登录之后，才进行获取未读消息