三种方法实现Javascript控制ScrollBar(滚动条)

开发 前端
Javascript中滚动条还是比较实用的,于是我研究了一下如何用Javascript控制ScrollBar,这里和大家分享一下几种控制ScrollBar(滚动条)的方法。

本文向大家重点讲解一下ScrollBar(滚动条)的控制,这里提供了三种方法来实现用Javascript控制ScrollBar(滚动条),希望通过本文的学习你对控制滚动条的方法有深刻的认识。

用Javascript控制ScrollBar(滚动条)

以下都是默认自动滚动到底部,需要滚动到顶部只需将document.body.scrollHeight换为0.

方法一:用scroll方法实现

  1. <body onload="scroll(0,document.body.scrollHeight) ">   
  2. <script>   
  3. document.write(new Array(100).join("<br>"))   
  4. </script>   

方法二:用scrollBy方法实现

  1. <body onload="scrollBy(0,document.body.scrollHeight) ">   
  2. <script>   
  3. document.write(new Array(100).join("<br>"))   
  4. </script>   
  5.  

方法三:用scrollTo方法实现

  1. <body onload="scrollTo(0,document.body.scrollHeight)">   
  2. <script>   
  3. document.write(new Array(100).join("<br>"))   
  4. </script>   
  5.  

如果是在框架中,需要控制框架的ScrollBar,那么要加parent,例如parent.scrollTo(0,0);
 

【编辑推荐】

  1. 使用Javascript巧妙获取滚动条位置
  2. JavaScript fixed()方法语法浅析
  3. IE6.0中使用Javascript支持png格式图片
  4. Javascript中CSS属性float特殊写法
  5. Javascript巧妙解决img做网站异常提交问题

 

 

责任编辑:佚名 来源: lukiya.com
相关推荐

2013-01-04 15:47:54

Android开发平铺UI设计

2023-09-11 09:07:58

CSS隐藏滚动条

2021-07-13 12:31:27

IT组织改进首席技术官

2022-11-30 15:15:48

2010-09-30 15:24:31

滚动条Javascript

2010-11-09 14:35:48

SQL Server查

2010-09-06 10:04:31

CSS样式表

2009-07-08 12:56:32

编写Servlet

2011-09-02 10:03:40

jQuery滚动图片

2024-01-22 09:28:23

CSS前端滚动驱动

2015-12-11 09:24:38

加密数据Linux

2010-08-26 16:19:41

DIV圆角

2009-06-23 10:45:18

Hibernate支持

2011-06-10 10:43:12

Ubuntu应用安装

2010-09-14 15:10:49

CSS注释

2009-12-11 18:49:39

预算编制博科资讯

2023-08-14 17:58:13

RequestHTTP请求

2022-07-13 16:06:16

Python参数代码

2011-04-18 15:32:45

游戏测试测试方法软件测试

2012-06-20 13:46:23

CSS
点赞
收藏

51CTO技术栈公众号