js如何控制整个页面滚动条的位置

JavaScript05

js如何控制整个页面滚动条的位置,第1张

有两种方法。

1、通过div的scrollTop变动控制垂直滚动条位置。通过div的scrollLeft变动控制水平滚动条位置。

示例:

<body>

//d1是外层div,带滚动条

<div id='d1' style='height:200pxwidth:100pxoverflow:autobackground:blue'>

<div style='height:500pxwidth:500pxbackground:yellow'>2222</div>

</div>

</body>

<script>

document.getElementById('d1').scrollTop=100//通过scrollTop设置滚动到100位置

document.getElementById('d1').scrollLeft=200//通过scrollTop设置滚动到200位置

</script>

2、用html锚点

如下:

<a href="#test">aaaaa</a>

<div id="test">lalallalalalala</div>

扩展资料

1、JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。

(1)、是一种解释性脚本语言(代码不进行预编译)。

(2)、主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。

(3)、可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

(4)、跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

2、JavaScript脚本语言具有以下特点:

(1)、脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

(2)、基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

(3)、简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

(4)、动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

(5)、跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

参考资料:百度百科:JavaScript

使用scrollby(x轴,y轴)方法就可以使文档对象滚动到距离浏览器窗口坐标的指定位置上

注意事项

文档对象可以看做是网页所有可见内容的存储容器,网页所有可见内容称为页面

网页x轴坐标与数学一样,但是y轴坐标是相反的,向下是正数,向上是负数

页面移动出去的距离不能和滚动条移动出去的距离对等

滚动条移动出去多少像素才能等达到页面要移动出去的像素是根据整个页面的尺寸比例计算的

这个文档对象移动出去的距离在坐标系上是一定是负数,但是我们要用正数来表示他距离浏览器窗口0,0坐标的距离

这个方法移动的是文档对象和浏览器存储文档对象的窗口0,0位置坐标的距离,绝不是滚动条和文档对象的距离,

移动出去的距离就是文档对象不可见部分内容和浏览器存储文档对象的窗口0,0坐标的距离

这个方法使用scroll命名只是因为文档对象移动出去的距离需要滚动条滚动才能达到效果,便于记忆而已

scrollby()方法是window对象下的方法,document对象及其子对象没有该方法

document对象及其子对象如果要获取或设置元素内部内容滚动出去的距离,请使用scrollTop和scrollLeft, 注意该方法是计算的不可见部分移动出去的内容顶端距离容器的距离是从容器内边距开始计算,而不是边框

使用scrollby()必须存在滚动条,且有一定的高度才能看出方法的效果

如果你的意思是将页面向下滚动500px,那么是可以实现的.如果说想要将浏览器窗口向下移动,那么现在大多数浏览器都会限制这类脚本,但并不是说脚本不能,而是浏览器会不会响应.如果说只是将内容下移,那么可以设置最上面元素的margin-top或padding-top来实现.