方法一

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

调用示例

ScrollTop(scrollTop, 500)