纯js实现减速滚动置顶效果

最新推荐文章于 2023-03-29 15:50:04 发布

叁冬

最新推荐文章于 2023-03-29 15:50:04 发布

阅读量501

点赞数 1

文章标签： js 置顶

本文链接：https://blog.csdn.net/weixin_39651562/article/details/102939910

版权

// 按钮处于显示状态 并且滚动方法处于空闲中
      if (this.scrollBtnShow && this.canScroll) {
        // 开始执行
        this.canScroll = false
        // 获取到页面顶部的距离
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        // 实现需求：任何高度的页面都将在100步以内滚动完毕
        // 实现过程：
        // 加速时的路程走一半减速时的路程走一半 (scrollTop / 2)
        // 加速滚动公式 1x+2x+3x = scrollTop / 2 减速同理
        // 高斯求和可得：x=(scrollTop / 2)/1275
        const biansuAtr = (scrollTop / 2) / 1275
        let scrollLength = 0
        // 加速步
        let jiasuStep = 0
        // 减速步
        let jiansuStep = 50
        let test = 0
        const timer = setInterval(() => {
          if (jiasuStep >= 50) {
            // 减速
            scrollLength = scrollLength + biansuAtr * jiansuStep
            test = test + biansuAtr * jiansuStep
            jiansuStep--
            if (jiansuStep === 0) {
              scrollLength = scrollTop
            }
          } else {
            // 加速
            jiasuStep++
            scrollLength = scrollLength + biansuAtr * jiasuStep
          }
          window.scrollTo(0, scrollTop - scrollLength)
          // 滚动到顶部 清除定时器
          if (scrollTop - scrollLength <= 0) {
            this.canScroll = true
            clearInterval(timer)
          }
        }, 15)
      }