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


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()方法返回或设置匹配元素的滚动条的垂直位置(属于 HTMLElement 的属性)。

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

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

4.scrollY

scrollY,读取页面滚动条的垂直距离,貌似只能读取不能设置(属于 window 的属性)。

例:window.scrollY

5.onscroll()事件

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

常用实例:

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

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



 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM