点击事件的动画滚动效果

时间:2017-04-21 07:47:24

标签: javascript jquery css

我想要相同的效果,但是侧面板显示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  -->

4 个答案:

答案 0 :(得分:2)

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  -->

答案 1 :(得分:1)

稍微改变一下css:

    .sidebar{
        position: fixed;
        top: 0;
    }
    .tab-content{
        margin-left: 100px;
    }

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

  $('html, body').animate({
    scrollTop: $('#' + id).offset().top
  }, 500);
  return false;
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style> 
        .sidebar{
            position: fixed;
            top: 0;
        }
        .tab-content{
            margin-left: 100px;
        }
</style>
<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  -->
&#13;
&#13;
&#13;

答案 2 :(得分:0)

如果我理解正确你只想让ABCD贴在左边?使用CSS position: fixed可以轻松实现这一点。请参阅updated JSFiddle

答案 3 :(得分:0)

只有一行的Css将解决问题。

&#13;
&#13;
$(document).ready(function() {
      $('.sidebar li').click(function() {
        var id = $(this).attr('data-atr');

        $('html, body').animate({
          scrollTop: $('#' + id).offset().top
        }, 500);
        return false;
      });
    }); 
&#13;
.left-sidebar-content .sidebar {position: fixed; top: 40px; left: 10px; }
.tab-content{margin-left: 80px; } 
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row">
      <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>
  </div>
&#13;
&#13;
&#13;