当页面加载溢出内容时一致滚动到底部

Question

我目前正在使用 Bootstrap 选项卡和自定义 CSS 使用最小 JS/jQuery 的聊天布局（消息的发送和接收将在稍后的编程过程中进行).

我已经使用了一些 jQuery 来制作聊天框 div (.messages) 如果框的内容高于可用高度，则滚动到底部。但我遇到的一个问题是该脚本仅适用于活动选项卡窗格。在下面的示例中，您可以看到脚本通过将 第一个选项卡 窗格滚动到底部来完成它的工作。但是，如果我们切换到 第四个选项卡，脚本将不再起作用。

有没有办法让邮件默认滚动到底部？

编辑： 这里有一个 jsfiddle link 以便于查看，因为内联代码片段工具在这个例子中效果不佳。请务必让预览面板更高。

$(document).ready(function(){
  // Scroll the chat messages to bottom
  $(".messages").animate({
    scrollTop: $('.messages').prop("scrollHeight")
  }, 1000);
});

.inbox-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #ccc; }
  .inbox-section .message-sidebar {
    width: 320px;
    background: #fff;
    border-right: 1px solid #ddd; }
    .inbox-section .message-sidebar .nav-tabs {
      border: none; }
      .inbox-section .message-sidebar .nav-tabs li {
        float: none; }
        .inbox-section .message-sidebar .nav-tabs li.active a {
          background: #eeeeee; }
          .inbox-section .message-sidebar .nav-tabs li.active a:hover {
            background: #eeeeee; }
            .inbox-section .message-sidebar .nav-tabs li.active a:hover h6 {
              color: #000; }
            .inbox-section .message-sidebar .nav-tabs li.active a:hover p {
              color: #777777; }
          .inbox-section .message-sidebar .nav-tabs li.active a h6 {
            color: #000; }
          .inbox-section .message-sidebar .nav-tabs li.active a p {
            color: #777777; }
        .inbox-section .message-sidebar .nav-tabs li + li {
          border-top: 1px solid #ddd; }
        .inbox-section .message-sidebar .nav-tabs li a {
          border: none;
          border-radius: 0;
          margin: 0;
          padding: 16px; }
          .inbox-section .message-sidebar .nav-tabs li a h6 {
            color: #555555; }
          .inbox-section .message-sidebar .nav-tabs li a p {
            color: #aaa; }
          .inbox-section .message-sidebar .nav-tabs li a:hover {
            background: #fff; }
            .inbox-section .message-sidebar .nav-tabs li a:hover h6 {
              color: #000; }
            .inbox-section .message-sidebar .nav-tabs li a:hover p {
              color: #777777; }
    .inbox-section .message-sidebar .message-preview h6,
    .inbox-section .message-sidebar .message-preview p {
      margin: 0;
      line-height: 1; }
    .inbox-section .message-sidebar .message-preview h6 {
      color: #000;
      font-size: 16px;
      margin-bottom: 6px; }
      .inbox-section .message-sidebar .message-preview h6:after {
        content: " ";
        display: table; }
      .inbox-section .message-sidebar .message-preview h6:after {
        clear: both; }
      .inbox-section .message-sidebar .message-preview h6 .label {
        float: right;
        padding: 0.25em 0.5em 0.25em;
        border-radius: 10px; }
    .inbox-section .message-sidebar .message-preview > p {
      font-size: 14px;
      color: #777777;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }
      .inbox-section .message-sidebar .message-preview > p strong:after {
        content: ':'; }
  .inbox-section .message-holder {
    width: 100%;
    padding: 20px;
    padding-right: 0;
    background: #fff; }
    .inbox-section .message-holder .messages-header {
      margin: 0 20px 20px 0;
      padding-bottom: 16px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      border-bottom: 1px solid #ddd; }
      .inbox-section .message-holder .messages-header h5 {
        margin: 0; }
      .inbox-section .message-holder .messages-header .buttons {
        list-style: none;
        margin: 0;
        padding: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: 20px; }
        .inbox-section .message-holder .messages-header .buttons li + li {
          margin-left: 8px; }
        .inbox-section .message-holder .messages-header .buttons li a {
          display: block;
          width: 32px;
          height: 32px;
          line-height: 30px;
          text-align: center; }
    .inbox-section .message-holder .messages {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      overflow-y: scroll;
      height: 300px;
      padding-right: 20px; }
      .inbox-section .message-holder .messages .received,
      .inbox-section .message-holder .messages .sent {
        border-radius: 10px;
        padding: 12px;
        font-size: 14px;
        line-height: 1.25; }
        .inbox-section .message-holder .messages .received + .sent,
        .inbox-section .message-holder .messages .received + .received,
        .inbox-section .message-holder .messages .sent + .sent,
        .inbox-section .message-holder .messages .sent + .received {
          margin-top: 24px; }
        .inbox-section .message-holder .messages .received p,
        .inbox-section .message-holder .messages .sent p {
          margin: 0; }
          .inbox-section .message-holder .messages .received p + p,
          .inbox-section .message-holder .messages .sent p + p {
            margin-top: 8px; }
        .inbox-section .message-holder .messages .received .name,
        .inbox-section .message-holder .messages .sent .name {
          font-size: 14px;
          font-style: italic;
          margin-bottom: 8px; }
          .inbox-section .message-holder .messages .received .name strong,
          .inbox-section .message-holder .messages .sent .name strong {
            font-size: 16px;
            font-style: normal; }
        .inbox-section .message-holder .messages .received .time,
        .inbox-section .message-holder .messages .sent .time {
          font-size: 12px;
          font-style: italic;
          text-align: right;
          margin-top: 8px; }
      .inbox-section .message-holder .messages .received {
        background: #eeeeee;
        margin-right: 48px;
        color: #555555; }
        .inbox-section .message-holder .messages .received .name {
          color: #222222; }
        .inbox-section .message-holder .messages .received .time {
          color: #aaa; }
      .inbox-section .message-holder .messages .sent {
        background: #238def;
        margin-left: 48px;
        color: #fff; }
        .inbox-section .message-holder .messages .sent .name {
          color: #fff; }
        .inbox-section .message-holder .messages .sent .time {
          color: #b1d7f9; }
    .inbox-section .message-holder .text-area {
      margin: 20px 20px 0 0;
      padding-top: 20px;
      border-top: 1px solid #ddd; }
      .inbox-section .message-holder .text-area textarea {
        resize: none;
        height: 100px !important; }
      .inbox-section .message-holder .text-area p {
        margin: 0;
        margin-top: 20px; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="inbox-section">
  <div class="message-sidebar">
    <ul class="nav nav-tabs" role="tablist">
      <li class="active">
        <a href="#message1" class="message-preview" data-toggle="tab">
          <h6>ABC Treks &amp; Travels Pvt. Ltd.</h6>
          <p><strong>You</strong> Thanks for the info. What's your number?</p>
        </a>
      </li>
      <li>
        <a href="#message2" class="message-preview" data-toggle="tab">
          <h6>Everest Trekking <span class="label label-danger">4</span></h6>
          <p><strong>Everest Trekking</strong> Yes sir, we do provide a lot of discount offers during the season</p>
        </a>
      </li>
      <li>
        <a href="#message3" class="message-preview" data-toggle="tab">
          <h6>Sunrise Travels Pvt. Ltd.</h6>
          <p><strong>You</strong> Inventore modi eveniet harum.</p>
        </a>
      </li>
      <li>
        <a href="#message4" class="message-preview" data-toggle="tab">
          <h6>Safari From The East</h6>
          <p><strong>Safari From The East</strong> Quod iure eos eveniet animi maiores fuga sint aliquam.</p>
        </a>
      </li>
    </ul>
  </div>
  <div class="message-holder">
    <div class="tab-content">
      <div class="tab-pane active" id="message1">
        <div class="messages-header">
          <h5>ABC Treks &amp; Travels</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="received">
            <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum suscipit repellendus doloribus, ad quidem pariatur error temporibus commodi.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat blanditiis optio, ad magni ducimus minus laudantium mollitia, sequi et dolorem, quo, laborum nihil architecto saepe error. Velit ipsum quis consequatur, non doloremque quae tenetur.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
          <div class="received">
            <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="received">
            <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="received">
            <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Thanks for the info.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
      <div class="tab-pane" id="message2">
        <div class="messages-header">
          <h5>Everest Trekking</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat blanditiis optio, ad magni ducimus minus laudantium mollitia, sequi et dolorem, quo, laborum nihil architecto saepe error. Velit ipsum quis consequatur, non doloremque quae tenetur.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
          <div class="received">
            <div class="name"><strong>Everest Trekking</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Thanks for the info.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
      <div class="tab-pane" id="message3">
        <div class="messages-header">
          <h5>Sunrise Travels Pvt. Ltd.</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="received">
            <div class="name"><strong>Sunrise Travels Pvt. Ltd.</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Thanks for the info.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
      <div class="tab-pane" id="message4">
        <div class="messages-header">
          <h5>Safari From The East</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="received">
            <div class="name"><strong>Safari From The East</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi placeat consectetur iste iusto inventore ipsam porro aliquid, facere similique neque eum repudiandae possimus doloremque. Voluptatum modi non vel consequuntur repellendus libero earum, labore eaque, veritatis, nisi quos eveniet dolore cum dignissimos aliquam atque aliquid similique hic molestias quod. Consectetur, magni.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Thanks for the info. Consectetur adipisicing elit. Nulla incidunt vel maiores atque, quaerat ab.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
          <div class="received">
            <div class="name"><strong>Safari From The East</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quibusdam dicta porro animi ipsum aspernatur cum vitae ex eos architecto, delectus, sed laudantium. Quasi repellat ad veniam ullam hic! Voluptas!</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Consectetur adipisicing elit quaerat ab.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

看看对你有没有帮助？

我在点击按钮时设置了动画。

$(document).ready(function() {
  // Scroll the chat messages to bottom
  var tabID, wrapHeight;
  $(".messages").animate({
    scrollTop: $('.messages').prop("scrollHeight")
  }, 1000);
  $('.nav a').click(function() {
    tabID = $(this).attr("href");
    setTimeout(function() {
      wrapHeight = $(tabID + " .msgWrapper").height();
      $(tabID + " .messages").animate({
        scrollTop: wrapHeight
      }, 1000);
    }, 0);
  });
});

.inbox-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.inbox-section .message-sidebar {
  width: 320px;
  background: #fff;
  border-right: 1px solid #ddd;
}

.inbox-section .message-sidebar .nav-tabs {
  border: none;
}

.inbox-section .message-sidebar .nav-tabs li {
  float: none;
}

.inbox-section .message-sidebar .nav-tabs li.active a {
  background: #eeeeee;
}

.inbox-section .message-sidebar .nav-tabs li.active a:hover {
  background: #eeeeee;
}

.inbox-section .message-sidebar .nav-tabs li.active a:hover h6 {
  color: #000;
}

.inbox-section .message-sidebar .nav-tabs li.active a:hover p {
  color: #777777;
}

.inbox-section .message-sidebar .nav-tabs li.active a h6 {
  color: #000;
}

.inbox-section .message-sidebar .nav-tabs li.active a p {
  color: #777777;
}

.inbox-section .message-sidebar .nav-tabs li+li {
  border-top: 1px solid #ddd;
}

.inbox-section .message-sidebar .nav-tabs li a {
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 16px;
}

.inbox-section .message-sidebar .nav-tabs li a h6 {
  color: #555555;
}

.inbox-section .message-sidebar .nav-tabs li a p {
  color: #aaa;
}

.inbox-section .message-sidebar .nav-tabs li a:hover {
  background: #fff;
}

.inbox-section .message-sidebar .nav-tabs li a:hover h6 {
  color: #000;
}

.inbox-section .message-sidebar .nav-tabs li a:hover p {
  color: #777777;
}

.inbox-section .message-sidebar .message-preview h6,
.inbox-section .message-sidebar .message-preview p {
  margin: 0;
  line-height: 1;
}

.inbox-section .message-sidebar .message-preview h6 {
  color: #000;
  font-size: 16px;
  margin-bottom: 6px;
}

.inbox-section .message-sidebar .message-preview h6:after {
  content: " ";
  display: table;
}

.inbox-section .message-sidebar .message-preview h6:after {
  clear: both;
}

.inbox-section .message-sidebar .message-preview h6 .label {
  float: right;
  padding: 0.25em 0.5em 0.25em;
  border-radius: 10px;
}

.inbox-section .message-sidebar .message-preview>p {
  font-size: 14px;
  color: #777777;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.inbox-section .message-sidebar .message-preview>p strong:after {
  content: ':';
}

.inbox-section .message-holder {
  width: 100%;
  padding: 20px;
  padding-right: 0;
  background: #fff;
}

.inbox-section .message-holder .messages-header {
  margin: 0 20px 20px 0;
  padding-bottom: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
}

.inbox-section .message-holder .messages-header h5 {
  margin: 0;
}

.inbox-section .message-holder .messages-header .buttons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 20px;
}

.inbox-section .message-holder .messages-header .buttons li+li {
  margin-left: 8px;
}

.inbox-section .message-holder .messages-header .buttons li a {
  display: block;
  width: 32px;
  height: 32px;
  line-height: 30px;
  text-align: center;
}

.inbox-section .message-holder .messages {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow-y: scroll;
  height: 300px;
  padding-right: 20px;
}

.inbox-section .message-holder .messages .received,
.inbox-section .message-holder .messages .sent {
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.25;
}

.inbox-section .message-holder .messages .received+.sent,
.inbox-section .message-holder .messages .received+.received,
.inbox-section .message-holder .messages .sent+.sent,
.inbox-section .message-holder .messages .sent+.received {
  margin-top: 24px;
}

.inbox-section .message-holder .messages .received p,
.inbox-section .message-holder .messages .sent p {
  margin: 0;
}

.inbox-section .message-holder .messages .received p+p,
.inbox-section .message-holder .messages .sent p+p {
  margin-top: 8px;
}

.inbox-section .message-holder .messages .received .name,
.inbox-section .message-holder .messages .sent .name {
  font-size: 14px;
  font-style: italic;
  margin-bottom: 8px;
}

.inbox-section .message-holder .messages .received .name strong,
.inbox-section .message-holder .messages .sent .name strong {
  font-size: 16px;
  font-style: normal;
}

.inbox-section .message-holder .messages .received .time,
.inbox-section .message-holder .messages .sent .time {
  font-size: 12px;
  font-style: italic;
  text-align: right;
  margin-top: 8px;
}

.inbox-section .message-holder .messages .received {
  background: #eeeeee;
  margin-right: 48px;
  color: #555555;
}

.inbox-section .message-holder .messages .received .name {
  color: #222222;
}

.inbox-section .message-holder .messages .received .time {
  color: #aaa;
}

.inbox-section .message-holder .messages .sent {
  background: #238def;
  margin-left: 48px;
  color: #fff;
}

.inbox-section .message-holder .messages .sent .name {
  color: #fff;
}

.inbox-section .message-holder .messages .sent .time {
  color: #b1d7f9;
}

.inbox-section .message-holder .text-area {
  margin: 20px 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid #ddd;
}

.inbox-section .message-holder .text-area textarea {
  resize: none;
  height: 100px !important;
}

.inbox-section .message-holder .text-area p {
  margin: 0;
  margin-top: 20px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="inbox-section">
  <div class="message-sidebar">
    <ul class="nav nav-tabs" role="tablist">
      <li class="active">
        <a href="#message1" class="message-preview" data-toggle="tab">
          <h6>ABC Treks &amp; Travels Pvt. Ltd.</h6>
          <p><strong>You</strong> Thanks for the info. What's your number?</p>
        </a>
      </li>
      <li>
        <a href="#message2" class="message-preview" data-toggle="tab">
          <h6>Everest Trekking <span class="label label-danger">4</span></h6>
          <p><strong>Everest Trekking</strong> Yes sir, we do provide a lot of discount offers during the season</p>
        </a>
      </li>
      <li>
        <a href="#message3" class="message-preview" data-toggle="tab">
          <h6>Sunrise Travels Pvt. Ltd.</h6>
          <p><strong>You</strong> Inventore modi eveniet harum.</p>
        </a>
      </li>
      <li>
        <a href="#message4" class="message-preview" data-toggle="tab">
          <h6>Safari From The East</h6>
          <p><strong>Safari From The East</strong> Quod iure eos eveniet animi maiores fuga sint aliquam.</p>
        </a>
      </li>
    </ul>
  </div>
  <div class="message-holder">
    <div class="tab-content">
      <div class="tab-pane active" id="message1">
        <div class="messages-header">
          <h5>ABC Treks &amp; Travels</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="msgWrapper">
            <div class="received">
              <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum suscipit repellendus doloribus, ad quidem pariatur error temporibus commodi.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat blanditiis optio, ad magni ducimus minus laudantium mollitia, sequi et dolorem, quo, laborum nihil architecto saepe error. Velit ipsum quis consequatur, non doloremque quae
                tenetur.
              </p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
            <div class="received">
              <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="received">
              <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="received">
              <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Thanks for the info.</p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
      <div class="tab-pane" id="message2">
        <div class="messages-header">
          <h5>Everest Trekking</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="msgWrapper">
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat blanditiis optio, ad magni ducimus minus laudantium mollitia, sequi et dolorem, quo, laborum nihil architecto saepe error. Velit ipsum quis consequatur, non doloremque quae
                tenetur.
              </p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
            <div class="received">
              <div class="name"><strong>Everest Trekking</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Thanks for the info.</p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
      <div class="tab-pane" id="message3">
        <div class="messages-header">
          <h5>Sunrise Travels Pvt. Ltd.</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="msgWrapper">
            <div class="received">
              <div class="name"><strong>Sunrise Travels Pvt. Ltd.</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Thanks for the info.</p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
      <div class="tab-pane" id="message4">
        <div class="messages-header">
          <h5>Safari From The East</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="msgWrapper">
            <div class="received">
              <div class="name"><strong>Safari From The East</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi placeat consectetur iste iusto inventore ipsam porro aliquid, facere similique neque eum repudiandae possimus doloremque. Voluptatum modi non vel consequuntur repellendus
                libero earum, labore eaque, veritatis, nisi quos eveniet dolore cum dignissimos aliquam atque aliquid similique hic molestias quod. Consectetur, magni.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Thanks for the info. Consectetur adipisicing elit. Nulla incidunt vel maiores atque, quaerat ab.</p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
            <div class="received">
              <div class="name"><strong>Safari From The East</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quibusdam dicta porro animi ipsum aspernatur cum vitae ex eos architecto, delectus, sed laudantium. Quasi repellat ad veniam ullam hic! Voluptas!</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Consectetur adipisicing elit quaerat ab.</p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
    </div>
  </div>
</div>

当页面加载溢出内容时一致滚动到底部

Consistent scroll-to-bottom when the page loads on overflown content

css

jquery

bootstrap-tabs