JS控制滚动条滚动

JS可以通过使用scrollTop属性来控制元素的滚动，通过doucument来获取节点进行操作。以下是一个简单的示例。

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

在上面的示例中，通过 document.getElementById 获取需要滚动的元素，然后设置 scrollTop 属性为需要滚动到的位置，即可实现控制滚动条滚动。

但是上面是直接滚动到顶部，并不平滑，可以使用window.requestAnimationFrame方法来实现动画的效果。

var element = document.getElementById('myEl'); // 获取需要滚动的节点
var targetPosition = 50; // 滚动到距离顶部50像素的位置
var duration = 1000; // 滚动动画的持续时间
var startTime = null; // 动画开始时间
 
function scrollTop(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(scrollTop); // 开始滚动动画

通过获取需要滚动的元素和目标位置，设置动画的持续时间，在scrollTop中，通过计算的进度和位置，实现滚动效果，调用window.requestAnimationFrame继续滚动直到动画结束。