超详细！JavaScript 打造滑动加载数字滚动动画，原理、步骤、代码一步到位

使用JavaScript实现页面滑动到指定位置加载动画（例如：数字滚动）

原理1：

1.获取浏览器窗口的高度；

2.获取页面滚动的高度；

3.获取页面距离文档（document）顶部的高度

原理2：

1.首先创建了一个带有数字计数器的 div 元素，并为其设置了 CSS 样式，其中数字计数器使用了 overflow:hidden 和 vertical-align:bottom 属性来隐藏数字滚动时的溢出部分。

2.使用 JavaScript 编写了一个动画函数 animateValue，该函数接受要动画的元素对象、起始值、结束值和动画持续时间作为参数

3.调用 animateValue 函数并将数字计数器元素、起始值 0、结束值 1000 和动画持续时间 2000ms 传递给它，这将使数字计数器从 0 滚动到 1000，持续时间为 2 秒

开始

原理1实现步骤

$(document).ready(function () {
  var flag = true;
  var a, b, c;
  a = $(window).height();
  var group = $(".apozibox");
$(window).scroll(function () {
b = $(this).scrollTop();
c = group.offset().top;
console.log(c)
if (a + b > c && flag) 
  flag = false
} else {
  if (a + b < c && !flag) {
    flag = true
  }
}
});
});

原理2实现步骤

function animateValue(obj, start, end, duration) {
  let startTimestamp = null;
  const step = (timestamp) => {
    if (!startTimestamp) startTimestamp = timestamp;
    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
    obj.innerHTML = Math.floor(progress * (end - start) + start);
    if (progress < 1) {
      window.requestAnimationFrame(step);
    }
  };
  window.requestAnimationFrame(step);
}

const count = document.querySelector('.count');
const count1 = document.querySelector('.count1');
const count2 = document.querySelector('.count2');
const count3 = document.querySelector('.count3');
animateValue(count, 0, 2015, 2500);
animateValue(count1, 0, 6667, 2500);
animateValue(count2, 0, 12000, 2500);
animateValue(count3, 0, 32, 2500);

最后将他们整理在一块

function animateValue(obj, start, end, duration) {
  let startTimestamp = null;
  const step = (timestamp) => {
    if (!startTimestamp) startTimestamp = timestamp;
    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
    obj.innerHTML = Math.floor(progress * (end - start) + start);
    if (progress < 1) {
      window.requestAnimationFrame(step);
    }
  };
  window.requestAnimationFrame(step);
}

const count = document.querySelector('.count');
const count1 = document.querySelector('.count1');
const count2 = document.querySelector('.count2');
const count3 = document.querySelector('.count3');


$(document).ready(function () {
  var flag = true;
  var a, b, c;
  a = $(window).height(); //浏览器窗口高度  600
  var group = $(".apozibox");
  $(window).scroll(function () {
    b = $(this).scrollTop(); //页面滚动的高度  200
    c = group.offset().top; //元素距离文档（document）顶部的高度  334
    console.log(c)
    if (a + b > c && flag) {
      animateValue(count, 0, 2015, 2000);
      animateValue(count1, 0, 6667, 2000);
      animateValue(count2, 0, 12000, 2000);
      animateValue(count3, 0, 32, 2000);
      flag = false
    } else {
      if (a + b < c && !flag) {
        flag = true
      }
    }
  });
});

查看滚动了多少距离
// window.onscroll = function() {
//   //为了保证兼容性，这里取两个值，哪个有值取哪一个
//   //scrollTop就是触发滚轮事件时滚轮的高度
//   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//   console.log("滚动距离" + scrollTop);
// }