js controla el desplazamiento de la barra de desplazamiento

 método uno

JavaScript puede  scrollTop controlar el desplazamiento de elementos mediante atributos operativos. El siguiente es un código de ejemplo simple:

var element = document.getElementById('myElement'); // 获取需要滚动的元素
element.scrollTop = 100; // 滚动到距离顶部100像素的位置

En el ejemplo anterior, primero  document.getElementById obtenga el elemento que debe desplazarse y luego establezca  scrollTop la propiedad en la posición a la que debe desplazarse, para controlar el desplazamiento de la barra de desplazamiento.

Si necesita un desplazamiento suave, puede utilizar  window.requestAnimationFrame métodos para lograr efectos de animación. El código de muestra es el siguiente:

var element = document.getElementById('myElement'); // 获取需要滚动的元素
var targetPosition = 100; // 滚动到距离顶部100像素的位置
var duration = 500; // 滚动动画的持续时间（毫秒）
var startTime = null; // 动画开始时间

function scrollTo(timestamp) {
  if (!startTime) startTime = timestamp;
  var progress = timestamp - startTime;
  var position = Math.min(progress / duration * targetPosition, targetPosition);
  element.scrollTop = position;
  if (progress < duration) {
    window.requestAnimationFrame(scrollTo);
  }
}

window.requestAnimationFrame(scrollTo); // 开始滚动动画

 En el ejemplo anterior, primero obtenga el elemento que debe desplazarse y la posición de destino, y luego establezca la duración de la animación. En  scrollTo la función, se logra un efecto de desplazamiento suave calculando el progreso y la posición actuales. Cuando la animación de desplazamiento no se complete, llame  window.requestAnimationFrame a un método para continuar desplazándose hasta que se complete la animación.

 Método dos

 Obtener distancia de desplazamiento

window.addEventListener('scroll', () => {
    scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  })

const ScrollTop = (number = 0, time) => {
  if (!time) {
    document.body.scrollTop = document.documentElement.scrollTop = number;
    return number;
  }
  const spacingTime = 20; // 设置循环的间隔时间  值越小消耗性能越高
  let spacingInex = time / spacingTime; // 计算循环的次数
  let nowTop = document.body.scrollTop + document.documentElement.scrollTop; // 获取当前滚动条位置
  let everTop = (number - nowTop) / spacingInex; // 计算每次滑动的距离
  let scrollTimer = setInterval(() => {
    if (spacingInex > 0) {
      spacingInex--;
      ScrollTop(nowTop += everTop);
    } else {
      clearInterval(scrollTimer); // 清除计时器
    }
  }, spacingTime);
}

Ejemplo de llamada

ScrollTop(scrollTop, 500)