实现页面打开后滚动到最底端的效果

摘要:
另外,页面的滚动高度必须在网页加载完成后才能获取到,所以触发事件用onload。document.write注意:因为页面加载完后默认滚动在最顶端,所以在本例中用scroll、scrollBy和scrollTo方法的效果一样,然而它们之间其实是有区别的。特别提示本例三种方法的代码运行后,在页面加载完成后将自动滚动到页面最底端,效果如图1.7.3所示。scrollTo将窗口滚动到指定的x和y偏移量。

滚动页面的方法有scroll、scrollBy和scrollTo,三个方法都带两个参数:x(X轴上的偏移量)和y(Y轴上的偏移量)。因为是要滚动到页面底部,所以参数x为0,y为页面的滚动高度。另外,页面的滚动高度必须在网页加载完成后才能获取到,所以触发事件用onload。

具体步骤:

方法一:用scroll方法实现。
<bodyonload="scroll(0,document.body.scrollHeight)">
<script>
document.write(newArray(100).join("<br>"))
</script>
方法二:用scrollBy方法实现。
<bodyonload="scrollBy(0,document.body.scrollHeight)">
<script>
document.write(newArray(100).join("<br>"))
</script>
方法三:用scrollTo方法实现。
<bodyonload="scrollTo(0,document.body.scrollHeight)">
<script>
document.write(newArray(100).join("<br>"))
</script>
注意:因为页面加载完后默认滚动在最顶端,所以在本例中用scroll、scrollBy和scrollTo方法的效果一样,然而它们之间其实是有区别的。

特别提示

本例三种方法的代码运行后,在页面加载完成后将自动滚动到页面最底端,效果如图1.7.3所示。

图1.7.3加载完成后自动滚动到页面底端的效果

  特别说明

告诉读者通过该问题的解决过程,需要掌握什么内容或技巧,你能够学到什么,以及其他相关的知识点。

scroll将窗口滚动到自左上角起指定的xy偏移量。
scrollBy将窗口滚动xy偏移量。
scrollTo将窗口滚动到指定的xy偏移量。

免责声明:文章转载自《实现页面打开后滚动到最底端的效果》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇MySQL规约(阿里巴巴)Java生成与解析二维码下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

scroll事件总结

一般监听窗口的滚动事件都是给window,document,body绑定滚动事件。但是需要注意以下几点: (1)给body绑定scroll事件时,this指向window (2)不管给谁绑定,要获取scrollTop值都是通过document.body来获取。即document.body.scrollTop.window和document是没有scroll...

QLabel显示图像

通常用QLabel显示图像,QLabel类有setPixmap()函数,可以用来显示图像。也可以直接用QPainter画出图像。 如果图像过大,直接用QLabel显示,将会出现有部分图像显示不出来,这时可以用Scroll Area部件。方法:将QLabel部件放到Scroll Area部件里面,将两个采用栅格布局,当图像超出了QLabel部件大小时,就会产...

VS2010主题设置及插件推荐

本文主要写了个人使用 VS2010 的一些配置及实用插件,从而打造一个符合个人风格的开发环境。 基础设置 安装 Visual Assist X 在 VS2010 中若不安装 Visual Assist X 这个插件,直接开发 C++ 相关的项目将是非常痛苦的事情。默认环境没有对代码的不同部分进行颜色高亮显示,也没有任何的智能提示,在这种情况下想要准确写出...

CSS背景属性

1、 background-color     背景颜色 2、 background-image    背景图片 3、 Background-repeat    repeat(默认)  |  no-repeat |   repeat-x   |  repeat-y     背景平铺 4 、Background-position  left  |  r...

UIScrollView 原理详解

UIScrollView 原理详解      語句解釋 UITableView、UITextView是UIScrollView的子类。 UITableViewController是UIViewController的子类。 UITableViewController是管理表格视图的。 表格视图单元是你的UITableView用来在自身显示数据的UIView子...

解决博易博客后台文章管理页面无法显示分页的问题

升级blogyi2.0以后我发现文章管理页面找不到分页的功能,于是我换了几个浏览器查看了一下,火狐或谷歌浏览器可以看到分页功能的。这很明显是后台css样式的问题。通过谷歌浏览器测试了一下,找到了分页功能的css样式。 解决办法非常简单: 1.打开BlogYi.Net-2.0-Source\BlogEngine\BlogEngine.NET\admin\st...