JavaScript控制滚动条滚动的两种简单方法

作者：青柠

时间：2026-10-30

本文介绍两种JavaScript控制滚动条的方法。第一种通过直接设置元素的scrollTop属性实现快速定位，并结合requestAnimationFrame实现平滑滚动动画。第二种方法通过监听scroll事件获取当前滚动距离，并提供一个封装函数支持指定目标位置与时间的平滑滚动效果，适用于需要自定义滚动体验的场景。

文章目录

方案一

利用 JavaScript 操作 scrollTop 特性可管理元素滚动行为，参考如下基础代码片段：

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

上述代码先通过 document.getElementById 定位目标元素，随后将 scrollTop 特性赋值为指定偏移量，从而达成滚动控制。

若需实现平滑过渡，可借助 window.requestAnimationFrame 接口构建动画流程，参考代码如下：

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); // 开始滚动动画

上述逻辑先提取目标元素及终点坐标，并定义动画时长。在 scrollTo 回调内，依据时间差与总时长计算当前偏移量，以此完成平滑滚动。在动画未结束前，持续调用 window.requestAnimationFrame 接口推进滚动过程，直至动画终止。

方案二

提取滚动偏移量

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);
}

应用示例