【Jump】 js 控制页面的滚动

最新推荐文章于 2024-06-12 09:15:58 发布

莱米code

最新推荐文章于 2024-06-12 09:15:58 发布

阅读量1.5k

点赞数

分类专栏： javascript WEB前端

本文链接：https://blog.csdn.net/qq1154479896/article/details/109218837

版权

javascript 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

WEB前端

20 篇文章 0 订阅

订阅专栏

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jump</title>
  <style>
    #box {
      background-color: pink;
      margin-top: 250px;
      width: 100px;
      height: 2000px;
    }

    .btn{
      position: fixed;
      top: 50%;
      left: 50%;
    }

  </style>
</head>

<body>
  <div id="box"></div>
  <div class="btn">
    <button onclick="jump.run('#box', 200)">+200</button>
    <button onclick="jump.run('#box', -200)">-200</button>
  </div>


  <script>
    class Jump {
      constructor(){
        this._start = 0
        this._initialPosition = 0
      }

      _step(timestamp) {
        if(!this._start) {
          this._start = timestamp
        }
        const elapsed = timestamp - this._start;

        const nextPos = this._initialPosition
         + Math[this.offset > 0 ? 'min' : 'max']((elapsed / this.duration) * this.offset, this.offset)

        window.scrollTo(0, nextPos)
        if (elapsed < this.duration) {
          window.requestAnimationFrame(this._step.bind(this))
        } else {
          this._start = 0
        }
      }
      run(target, offset, duration = 500){
        this.element = document.querySelector(target)
        this.duration = duration
        this.offset = offset
        this._initialPosition = window.scrollY || window.pageYOffset
        console.log(this._initialPosition);
        window.requestAnimationFrame(this._step.bind(this))
      }
    }
    const jump = new Jump()
  </script>
</body>

</html>

莱米code

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Jump】 js 控制页面的滚动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jump</title> <style> #box { background-color: pi
复制链接

扫一扫

专栏目录