javascript - 带点击事件的动画滚动效果

Question

我想要相同的效果，但显示 A B C D 的侧面板喜欢粘在同一侧内容上，单击任何内容时将向下或向上滚动
A B C D - 目前整个内容都在上升

$('.sidebar li').click(function() {
  var id = $(this).attr('data-atr');

  $('html, body').animate({
    scrollTop: $('#' + id).offset().top
  }, 500);
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4 left-sidebar-content">
    <ul class="sidebar">
      <li id="li_1" data-atr="A" class="Active"><a href="javascript:void(0)">A</a></li>
      <li id="li_2" data-atr="B"><a href="javascript:void(0)">B</a></li>
      <li id="li_3" data-atr="C"><a href="javascript:void(0)">C</a></li>
      <li id="li_4" data-atr="D"><a href="javascript:void(0)">D</a></li>
    </ul>
  </div>
  <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
    <div class="tab-content">
      <div class="" id="A">
        <h3 class="section-title">Content for A</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus, massa mattis tincidunt lacinia, orci elit placerat justo, nec iaculis justo diam ut magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
          egestas. In lacinia quam tellus, sed feugiat nisl viverra non. Phasellus ut blandit turpis. Aliquam et nisl ut ex varius porta. Sed rhoncus pretium libero, sit amet volutpat libero elementum eu. Suspendisse imperdiet pulvinar ipsum non lacinia.
          Aenean pulvinar sit amet sapien id iaculis. Donec sit amet mi malesuada, congue nisi id, tristique tellus</p>
      </div>
      <div class="" id="B">
        <h3 class="section-title">Content for B</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus, massa mattis tincidunt lacinia, orci elit placerat justo, nec iaculis justo diam ut magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
          egestas. In lacinia quam tellus, sed feugiat nisl viverra non. Phasellus ut blandit turpis. Aliquam et nisl ut ex varius porta. Sed rhoncus pretium libero, sit amet volutpat libero elementum eu. Suspendisse imperdiet pulvinar ipsum non lacinia.
          Aenean pulvinar sit amet sapien id iaculis. Donec sit amet mi malesuada, congue nisi id, tristique tellus</p>
      </div>
      <div class="" id="C">
        <h3 class="section-title">Content for C</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus, massa mattis tincidunt lacinia, orci elit placerat justo, nec iaculis justo diam ut magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
          egestas. In lacinia quam tellus, sed feugiat nisl viverra non. Phasellus ut blandit turpis. Aliquam et nisl ut ex varius porta. Sed rhoncus pretium libero, sit amet volutpat libero elementum eu. Suspendisse imperdiet pulvinar ipsum non lacinia.
          Aenean pulvinar sit amet sapien id iaculis. Donec sit amet mi malesuada, congue nisi id, tristique tellus</p>
      </div>
      <div class="" id="D">
        <h3 class="section-title">Content for D</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus, massa mattis tincidunt lacinia, orci elit placerat justo, nec iaculis justo diam ut magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
          egestas. In lacinia quam tellus, sed feugiat nisl viverra non. Phasellus ut blandit turpis. Aliquam et nisl ut ex varius porta. Sed rhoncus pretium libero, sit amet volutpat libero elementum eu. Suspendisse imperdiet pulvinar ipsum non lacinia.
          Aenean pulvinar sit amet sapien id iaculis. Donec sit amet mi malesuada, congue nisi id, tristique tellus</p>
      </div>

    </div>
  </div>
</div>
<!-- container  -->

Answer 1

http://jsfiddle.net/kcmyxqkf/1/

只要给你的CSS:

.sidebar{
  position: fixed;
  top: 10px;
  left: 20px;
  z-index: 3;
}

.col-lg-8{
  margin-top: 80px;
}

$('.sidebar li').click(function() {
  var id = $(this).attr('data-atr');

  $('html, body').animate({
    scrollTop: $('#' + id).offset().top
  }, 500);
  return false;
});

.sidebar {
  position: fixed;
  top: 10px;
  left: 20px;
  z-index: 3;
}

.col-lg-8 {
  margin-top: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4 left-sidebar-content">
    <ul class="sidebar">
      <li id="li_1" data-atr="A" class="Active"><a href="javascript:void(0)">A</a></li>
      <li id="li_2" data-atr="B"><a href="javascript:void(0)">B</a></li>
      <li id="li_3" data-atr="C"><a href="javascript:void(0)">C</a></li>
      <li id="li_4" data-atr="D"><a href="javascript:void(0)">D</a></li>
    </ul>
  </div>
  <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
    <div class="tab-content">
      <div class="" id="A">
        <h3 class="section-title">Content for A</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus, massa mattis tincidunt lacinia, orci elit placerat justo, nec iaculis justo diam ut magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
          egestas. In lacinia quam tellus, sed feugiat nisl viverra non. Phasellus ut blandit turpis. Aliquam et nisl ut ex varius porta. Sed rhoncus pretium libero, sit amet volutpat libero elementum eu. Suspendisse imperdiet pulvinar ipsum non lacinia.
          Aenean pulvinar sit amet sapien id iaculis. Donec sit amet mi malesuada, congue nisi id, tristique tellus</p>
      </div>
      <div class="" id="B">
        <h3 class="section-title">Content for B</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus, massa mattis tincidunt lacinia, orci elit placerat justo, nec iaculis justo diam ut magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
          egestas. In lacinia quam tellus, sed feugiat nisl viverra non. Phasellus ut blandit turpis. Aliquam et nisl ut ex varius porta. Sed rhoncus pretium libero, sit amet volutpat libero elementum eu. Suspendisse imperdiet pulvinar ipsum non lacinia.
          Aenean pulvinar sit amet sapien id iaculis. Donec sit amet mi malesuada, congue nisi id, tristique tellus</p>
      </div>
      <div class="" id="C">
        <h3 class="section-title">Content for C</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus, massa mattis tincidunt lacinia, orci elit placerat justo, nec iaculis justo diam ut magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
          egestas. In lacinia quam tellus, sed feugiat nisl viverra non. Phasellus ut blandit turpis. Aliquam et nisl ut ex varius porta. Sed rhoncus pretium libero, sit amet volutpat libero elementum eu. Suspendisse imperdiet pulvinar ipsum non lacinia.
          Aenean pulvinar sit amet sapien id iaculis. Donec sit amet mi malesuada, congue nisi id, tristique tellus</p>
      </div>
      <div class="" id="D">
        <h3 class="section-title">Content for D</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus, massa mattis tincidunt lacinia, orci elit placerat justo, nec iaculis justo diam ut magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
          egestas. In lacinia quam tellus, sed feugiat nisl viverra non. Phasellus ut blandit turpis. Aliquam et nisl ut ex varius porta. Sed rhoncus pretium libero, sit amet volutpat libero elementum eu. Suspendisse imperdiet pulvinar ipsum non lacinia.
          Aenean pulvinar sit amet sapien id iaculis. Donec sit amet mi malesuada, congue nisi id, tristique tellus</p>
      </div>

    </div>
  </div>
</div>
<!-- container  -->