jq
垂直滚动条
$('body').scrollTop() //获取滚动距离
$('body').scrollTop(100) //设置滚动距离
水平滚动条
$('body').scrollLeft() //获取滚动距离
$('body').scrollLeft(100) //设置滚动距离
滚动事件
$(window).scroll(function () {
//滚动事件代码
}
jq动画与滚动结合使用
$('body').animate({
scrollTop: '100px'}, 1000); //设置垂直滚动100px,滚动时长一秒
$('body').animate({
scrollLeft: '100px'}, 1000); //设置水平滚动100px,滚动时长一秒
原生js
scroll()和scrollTo()
设置x轴,y轴的滚动距离,两个方法用法一样
window.scroll(100, 200);
window.scrollTo(100, 200);
scrollBy()
当前的基础上增加x轴,y轴的滚动距离
window.scrollBy(100, 200);
获取滚动距离
document.body.scrollTop //获取垂直滚动距离
document.getElementById('div').scrollLeft //获取水平滚动距离