jQuery代码平滑滑动效果

Question

想实现一个效果，就是当url显示#anchor_1 anchor_2

锚点的时候 能够平滑的滑动 目前的效果是很生硬的
查找了网上很多都是需要点击的 而且都是通过a元素 这个是在table里加个id实现的

求js写法！

html 如下

<div class="content-wrapper">
  <!-- section header -->
  <section class="content-header">
    <h1>管理</h1>
  </section>

  <!-- section meiboex -->
  <section class="content container-fluid">
    <div class="row">
      <div class="col-md-11">

        <div class="box box-default">
          <div class="box-header with-border">
            <h3 class="box-title">一覧</h3>
          </div>

          <div class="box-body">
            <table class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info" id="anchor_1">
              <tbody>
                <tr role="row" class="odd">
                  <td class="text-center">1</td>
                  <td class="text-center">2</td>
                  <td class="text-center">3</td>
                  <td class="text-center">4</td>
                  <td class="text-center">
                    <div class="section-row" style="display:inline-flex">
                      <button type="submit" class="btn btn-primary btn-xs angle-up item-up">
                        <i class="fa fa-angle-up" aria-hidden="true"></i>
                      </button>
                      <button type="submit" class="btn btn-primary btn-xs angle-down item-down">
                        <i class="fa fa-angle-down" aria-hidden="true"></i>
                      </button>
                    </div>
                  </td>
                </tr>
                <tr role="row" class="odd">
                  <td class="text-center">1</td>
                  <td class="text-center">2</td>
                  <td class="text-center">3</td>
                  <td class="text-center">4</td>
                  <td class="text-center">
                    <div class="section-row" style="display:inline-flex">
                      <button type="submit" class="btn btn-primary btn-xs angle-up item-up">
                        <i class="fa fa-angle-up" aria-hidden="true"></i>
                      </button>
                      <button type="submit" class="btn btn-primary btn-xs angle-down item-down">
                        <i class="fa fa-angle-down" aria-hidden="true"></i>
                      </button>
                    </div>
                  </td>
                </tr>
                <tr role="row" class="odd">
                  <td class="text-center">1</td>
                  <td class="text-center">2</td>
                  <td class="text-center">3</td>
                  <td class="text-center">4</td>
                  <td class="text-center">
                    <div class="section-row" style="display:inline-flex">
                      <button type="submit" class="btn btn-primary btn-xs angle-up item-up">
                        <i class="fa fa-angle-up" aria-hidden="true"></i>
                      </button>
                      <button type="submit" class="btn btn-primary btn-xs angle-down item-down">
                        <i class="fa fa-angle-down" aria-hidden="true"></i>
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>                    
            </table>
          </div>

        </div>

      </div>
    </div>
  </section>
  
  <!-- section catagory -->
  <section class="content container-fluid">
    <div class="row">
      <div class="col-md-11">

        <div class="box box-default">
          <div class="box-header with-border">
            <h3 class="box-title">一覧</h3>
          </div>

          <div class="box-body">
            <table class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info" id="anchor_2">
              <tbody>
                <tr role="row" class="odd">
                  <td class="text-center">1</td>
                  <td class="text-center">2</td>
                  <td class="text-center">3</td>
                  <td class="text-center">4</td>
                  <td class="text-center">
                    <div class="section-row" style="display:inline-flex">
                      <button type="submit" class="btn btn-primary btn-xs angle-up item-up">
                        <i class="fa fa-angle-up" aria-hidden="true"></i>
                      </button>
                      <button type="submit" class="btn btn-primary btn-xs angle-down item-down">
                        <i class="fa fa-angle-down" aria-hidden="true"></i>
                      </button>
                    </div>
                  </td>
                </tr>
                <tr role="row" class="odd">
                  <td class="text-center">1</td>
                  <td class="text-center">2</td>
                  <td class="text-center">3</td>
                  <td class="text-center">4</td>
                  <td class="text-center">
                    <div class="section-row" style="display:inline-flex">
                      <button type="submit" class="btn btn-primary btn-xs angle-up item-up">
                        <i class="fa fa-angle-up" aria-hidden="true"></i>
                      </button>
                      <button type="submit" class="btn btn-primary btn-xs angle-down item-down">
                        <i class="fa fa-angle-down" aria-hidden="true"></i>
                      </button>
                    </div>
                  </td>
                </tr>
                <tr role="row" class="odd">
                  <td class="text-center">1</td>
                  <td class="text-center">2</td>
                  <td class="text-center">3</td>
                  <td class="text-center">4</td>
                  <td class="text-center">
                    <div class="section-row" style="display:inline-flex">
                      <button type="submit" class="btn btn-primary btn-xs angle-up item-up">
                        <i class="fa fa-angle-up" aria-hidden="true"></i>
                      </button>
                      <button type="submit" class="btn btn-primary btn-xs angle-down item-down">
                        <i class="fa fa-angle-down" aria-hidden="true"></i>
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>                    
            </table>
          </div>
        </div>
      </div>
    </div>
  </section>
  
</div>

Answer 1

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    ul,
    li {
      list-style: none;
    }

    .section {
      background-color: #ddd;
      max-width: 640px;
      margin: 20px auto;
      height: 680px;
    }

    .map {
      position: fixed;
      left: 10px;
      top: 10px;
    }

    .map a {
      background: white;
      color: #666;
      display: inline-block;
      line-height: 44px;
      margin: 5px;
      padding: 0 8px;
      text-align: center;
      text-decoration: none;
      width: 128px;
    }
  </style>
</head>

<body>

  <nav class="map">
    <ul>
      <li><a href="#" data-anchor="section-first">第一屏</a></li>
      <li><a href="#" data-anchor="section-two">第二屏</a></li>
      <li><a href="#" data-anchor="section-three">第三屏</a></li>
      <li><a href="#" data-anchor="section-four">第四屏</a></li>
      <li><a href="#" data-anchor="section-five">第五屏</a></li>
    </ul>
  </nav>

  <div class="section" id="section-first"><span>第一屏</span></div>
  <div class="section" id="section-two"><span>第二屏</span></div>
  <div class="section" id="section-three"><span>第三屏</span></div>
  <div class="section" id="section-four"><span>第四屏</span></div>
  <div class="section" id="section-five"><span>第五屏</span></div>

  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-easing/1.4.1/jquery.easing.min.js"></script>
  <script>
    $(function () {

      // 滚动函数
      function animateScrollTo(anchor) {
        // 获取锚点对应的对象
        var $anchor = $('#' + anchor);

        // 锚点不存在
        if (!$anchor.get(0)) return;

        // 滚动效果
        $('body, html').stop(true, false)
          .animate({
            scrollTop: $anchor.offset().top,
          }, 600, 'easeOutBack');
      }

      // 导航点击时跳转
      $('.map a').on('click', function (e) {
        e.preventDefault();
        var anchor = $(this).attr('data-anchor');
        // 更新 URL
        window.location.hash = 'at_' + anchor;
        // 执行动画
        animateScrollTo(anchor);
      });

      // 页面加载完成时站到锚点
      $(window).on('load', function () {
        var anchor = window.location.hash;
        if (anchor) {
          // anchor.substr(4) 会去除 at_ 字符，只保留真实的锚点名称
          animateScrollTo(anchor.substr(4));
        }
      });

    });
  </script>
</body>

</html>

Answer 2

如果我没理解错的话你是要判断元素是否出现在可视区域，然后实现动画么？如果是下面代码是判断元素是否在可视区。

var $win = $(window);
var itemOffsetTop = $(".table").offset().top;//
var itemOuterHeight = $(".table").outerHeight();
var winHeight = $win.height();
$win.scroll(function () {
    var winScrollTop = $win.scrollTop();
    if(!(winScrollTop > itemOffsetTop+itemOuterHeight) && !(winScrollTop < itemOffsetTop-winHeight))     {
        console.log('出现了');
        //这里是你平滑动画的逻辑
    }
})

动画实现很多种
jquery.animate()