bester-ace

页面滚动(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);



 

发表于 2018-09-18 17:15  bester6  阅读(6786)  评论(0编辑  收藏  举报
 

分类:

技术点:

相关文章:

  • 2021-06-08
  • 2022-12-23
  • 2022-12-23
  • 2022-02-15
  • 2022-12-23
  • 2022-12-23
  • 2021-11-01
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-02-14
  • 2021-09-27
  • 2022-12-23
  • 2022-12-23
  • 2021-07-01
相关资源
相似解决方案