点击滑动到指定位置

最新推荐文章于 2023-11-07 14:37:39 发布

Mr_yq

最新推荐文章于 2023-11-07 14:37:39 发布

阅读量835

点赞数

文章标签： js scroll

本文链接：https://blog.youkuaiyun.com/Mr_yq/article/details/100992926

版权

这里只是提供一个思路，一个demo版，具体功能需自己完善

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  * {margin: 0;padding: 0;}
  .wrap {
    background-color: #fff;
    overflow: auto;
    height: 100%;
  }
  .container {
    height: 400px;
    overflow: hidden;
  }
  p {height: 40px;margin: 10px 0;}
  .wrap p:nth-child(2n) {
    background-color: #d7d7d7;
  }
  </style>
</head>
<body>
  <div class="container">
    <div class="wrap">
      <p>测试的scorell 1</p>
      <p>测试的scorell 2</p>
      <p>测试的scorell 3</p>
      <p>测试的scorell 4</p>
      <p>测试的scorell 5</p>
      <p>测试的scorell 6</p>
      <p>测试的scorell 7</p>
      <p>测试的scorell 8</p>
      <p>测试的scorell 9</p>
      <p>测试的scorell 10</p>
      <p>测试的scorell 11</p>
      <p>测试的scorell 12</p>
      <p>测试的scorell 13</p>
      <p>测试的scorell 14</p>
      <p>测试的scorell 15</p>
      <p>测试的scorell 16</p>
      <p>测试的scorell 17</p>
      <p>测试的scorell 18</p>
      <p>测试的scorell 19</p>
      <p>测试的scorell 20</p>
    </div>
  </div>
  <script>
   var pp = document.querySelectorAll('p');
   let wrap = document.querySelector('.wrap');
      
   pp.forEach(function(el){
    el.onclick = function(){
      clearInterval(timer);
      let top = this.offsetTop; //目标dom距离top的距离
      let wrap_top = wrap.scrollTop; //盒子滑动的距离
      if(top>wrap_top){
        var timer = setInterval(function(){ //定时器滑动
          wrap_top+=2;
          wrap.scrollTo(0,wrap_top);
          if(wrap_top>=top){
            clearInterval(timer)
          }
        },0)
      }
    }
   })
  </script>
</body>
</html>