文章/答案/技术大牛

发布

社区首页 >问答首页 >点击事件的动画滚动效果

问点击事件的动画滚动效果
EN

Stack Overflow用户

提问于 2017-04-21 07:47:24

回答 4查看 46关注 0票数 2

我想要同样的效果，但是显示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  -->

javascript

jquery

css

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-04-21 08:01:18

只需稍微修改一下css：

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

$('.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>
<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  -->

票数 1

Stack Overflow用户

发布于 2017-04-21 07:53:31

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

票数 2

Stack Overflow用户

发布于 2017-04-21 07:54:43

如果我理解正确的话，你只想让ABCD站在左边？这可以很容易地通过CSS position: fixed实现。见更新的JSFiddle。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43536866

复制

相似问题

问点击事件的动画滚动效果
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问点击事件的动画滚动效果EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问点击事件的动画滚动效果
EN