页面滚动(scroll)有关JS操作

来源:互联网 发布:js array 编辑:程序博客网 时间:2024/06/10 08:08

1.scrollBy(x,y)

scrollBy()方法可把内容滚动指定的像素数。

x:必需。把文档向右滚动的像素数。

y:必需。把文档向下滚动的像素数。

例:window.scrollBy(100,100); 

注意: 要使此方法工作 window 滚动条的可见属性必须设置为true!

2.scrollTo(x,y)

scrollTo()方法可把内容滚动到指定的像素数。

例:window.scrollTo(10,50);

3.scrollTop

scrollTop()方法返回或设置匹配元素的滚动条的垂直位置。

原生JS操作:document.body.scrollTop=0;

jQuery操作:$(document).scrollTop(0);

4.scrollY

scrollY,读取页面滚动条的垂直距离,貌似只能读取不能设置。

例:window.scrollY

5.onscroll()事件

例:window.onscroll=function(){};


常用实例:

  点击右下角置顶按钮,页面缓缓的返回顶部。

var timer=setInterval(function(){            window.scrollBy(0,-30);            if(window.scrollY===0){                clearInterval(timer);            }        },10);



0 0
原创粉丝点击