使用平滑滑块作为在调用ajax load方法时打开的另一个滑块的导航

<div class="container">
  <div class="navigation">
    <ul>
      <li><a href="#" data-target="content1">Content 1</a></li>
      <li><a href="#" data-target="content2">Content 2</a></li>
      <li><a href="#" data-target="content3">Content 3</a></li>
    </ul>
  </div>
  <div class="content">
    <div id="content1">Content 1</div>
    <div id="content2">Content 2</div>
    <div id="content3">Content 3</div>
  </div>
</div>

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.navigation {
  width: 100%;
  height: 50px;
  background: #f1f1f1;
}

.navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.navigation ul li {
  display: inline-block;
  margin-right: 10px;
}

.content {
  width: 100%;
  height: calc(100% - 50px);
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.content div {
  height: 100%;
  padding: 20px;
  display: none;
}

.content div:first-child {
  display: block;
}

$(document).ready(function() {
  $('.navigation a').click(function(e) {
    e.preventDefault();
    var target = $(this).data('target');
    $('.content div').hide();
    $('#' + target).load('content.php', function() {
      $('#' + target).fadeIn();
    });
  });
});