在默认情况下，页面加载完后默认滚动在最顶端，有些时候我们需要在页面打开后，定位滚动条的位置，比如，横向和纵向滚动条居中，实现页面滚动的方法有三种：scroll、scrollBy和 scrollTo，三个方法都带两个参数：x(X轴上的偏移量)和y(Y轴上的偏移量)。因此我们只需修改x,y的偏移量来设置滚动条的位置。另外，页面的滚动高度必须在网页加载完成后才能获取到，所以触发事件用onload。

方法一：用scroll方法实现滚动条位于最底端。

<body onload="scroll(0,document.body.scrollHeight) ">

方法二：用scrollBy方法实现滚动条位于最右端。

<body onload="scrollBy(document.body.scrollWidth，0) ">

方法三：用scrollTo方法实现水平滚动条和纵向滚动条均居中。

<body onload="scrollTo(document.body.scrollWidth/2,document.body.scrollHeight/2)">

虽然使用scroll、scrollBy和scrollTo方法的效果一样，但是彼此之间还是有一些区别的。 经测试如果使用某一确定的位置参数时，不需要带单位，例据顶端300像素:

<body onload="scroll(0,300) ">

scroll、scrollBy和 scrollTo三种方法定位滚动条位置的更多相关文章

  1. App元素定位三种方法

    来自博客: http://testingpai.com/article/1595507262082 以下方法操作前必须确保有手机设备连入电脑,检测是否有手机连入命令 adb devices 第一种:A ...

  2. 纯Css绘制三角形箭头三种方法

    在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...

  3. javascript实现图片延迟加载方法汇总(三种方法)

    看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,跟着小编一 ...

  4. python3 打开页面后多窗口处理三种方法

    多窗口处理三种方法 导包,实例化浏览器from selenium import webdriver fx=webdriver.Firefox()方法一fx.switch_to.window(fx.wi ...

  5. Tomcat项目部署的三种方法

    第一种方法如下:直接把我们的项目文件夹放到tomcat里面,在这里我自己做的是一个测试项目oa,如图 启动tomcat,打开浏览器,输入localhost/oa  即可打开你的文件,注意 :访问的时候 ...

  6. java 分次读取大文件的三种方法

    1. java 读取大文件的困难 java 读取文件的一般操作是将文件数据全部读取到内存中,然后再对数据进行操作.例如 Path path = Paths.get("file path&qu ...

  7. 应对加密js的三种方法

    经常遇到网页在登录后会对用户输入的帐号和密码通过js进行加密,导致模拟登录这类网站时受到阻碍 这里小记一下当前解决该问题的三种方法 1.利用python实现js同等加密. 2.利用selenium模拟 ...

  8. C# | VS2019连接MySQL的三种方法以及使用MySQL数据库教程

    本文将介绍3种添加MySQL引用的方法,以及连接MySQL和使用MySQL的教程 前篇:Visual Studio 2019连接MySQL数据库详细教程 \[QAQ \] 第一种方法 下载 Mysql ...

  9. 像画笔一样慢慢画出Path的三种方法(补充第四种)

    今天大家在群里大家非常热闹的讨论像画笔一样慢慢画出Path的这种效果该如何实现. 北京-LGL 博客号@ligl007发起了这个话题.然后各路高手踊跃发表意见.最后雷叔 上海-雷蒙 博客号@雷蒙之星 ...

随机推荐

  1. DirectShow音频采集声音不连续问题分析与解决办法经验总结

    最近广州大雨不断,并且多数无前兆,突然就来场大雨,给同学们降降温,说来本也是好事,但有时候下的真不是时候,最近这段时间都是即将下班了,大雨就来了,昨晚快下班前又出现了大雨,北方人总爱忘带雨伞,这不就被 ...

  2. KVM 虚拟机基本管理及常用命令

    KVM的基本管理 1.查看KVM虚拟机配置文件 #Kvm虚拟机默认配置文件位置 [root@kvm qemu]# pwd /etc/libvirt/qemu [root@kvm qemu]# ll t ...

  3. smartGit注意点

    1.xcode工程默认会创建一个.git文件,去掉勾选 2.文件夹不显示,点击smartGit导航栏上的view-->Files from Subdirectories

  4. spring框架--IOC容器，依赖注入

    思考: 1. 对象创建创建能否写死? 2. 对象创建细节 对象数量 action  多个   [维护成员变量] service 一个   [不需要维护公共变量] dao     一个   [不需要维护 ...

  5. Python 正则表达式学习笔记

    本文介绍了Python对于正则表达式的支持,包括正则表达式基础以及Python正则表达式标准库的完整介绍及使用示例.本文的内容不包括如何编写高效的正则表达式.如何优化正则表达式,这些主题请查看其他教程 ...

  6. 【第二篇】学习 android 事件总线androidEventbus之异步事件的传递

    1,不同Activity直接发送Ansy的事件,以及其他任何事件,必须通过 postSticky方式来进行事件的传递,而不能通过post的形式来进行传递:EventBus.getDefault().p ...

  7. 使用Visual C++编程

    1.Visual C++的主要组件 Visual C++支持遵循C++11语言标准的C++语句,C++11语言标准是在ISO/IEC 14882:2011文档中定义的.Visual C++还没有实现该 ...

  8. AFNetWorking 判断当前版本是否是最新版本

    NSString *url = [[NSString alloc] initWithFormat:@"http://itunes.apple.com/lookup?id=%@",@ ...

  9. mybatis 做 insert操作的时候返回插入的那条数据的id

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:吃丸子的小鹿链接:http://www.zhihu.com/question/20810321/answer/16843223 ...

  10. PHP运行模式(cgi,fast-cgi,cli, ISAPI ,web模块模式)【转载】

    PHP运行模式有5钟: 1)cgi 通用网关接口(Common Gateway Interface))2)fast-cgi 常驻 (long-live) 型的 CGI3)cli  命令行运行   (C ...