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继续滚动直到动画结束。