原生js实现回到顶部
网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
scrollTo 表示滚动到多少像素
scrollBy 表示滚动多少像素
scrollTop 不太兼容
//非chrom
document.documentElement.scrollTop
//chrom
document.body.scrollTop
//兼容写法
scrollTop=document.documentElement.scrollTop||document.body.scrollTop
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style> body { height: 5000px; } a { position: fixed; right: 100px; width: 50px; height: 50px; background: red; color: white; text-align: center; line-height: 50px; display: block; } .toTop { bottom: 160px; } .toBottom { bottom: 100px; } </style> <script> window.onload = function() { var oA = document.getElementsByTagName('a'); oA[0].onclick = function() { toScroll("top") } oA[1].onclick = function() { toScroll("bottom") } } function toScroll(target) { clearInterval(this.timer) var scrollHeight = document.body.offsetHeight - document.documentElement.clientHeight; this.timer = setInterval(function() { var scrolltop = document.documentElement.scrollTop || document.body.scrollTop; switch (target) { case 'top': console.log(scrolltop); window.scrollBy(0, -100); if (Math.ceil(scrolltop) <= 0) { clearInterval(this.timer) }; break; case 'bottom': console.log(scrolltop); window.scrollBy(0, 100); if (Math.ceil(scrolltop) >= scrollHeight) { clearInterval(this.timer) }; break; } }, 30) } </script> </head> <body> <a href="javascript:;" class="toTop">上</a> <a href="javascript:;" class="toBottom">下</a> </body> </html>
最新文章
- 将字符串转换成JSON对象
- MySql数据库忘记root密码
- linux平台下防火墙iptables原理(转)
- gopush-cluster 架构
- Unity CombineChildren和MeshCombineUtility
- android Base64加密解密
- Linux下的QQ折腾记
- c# in depth之泛型的实现
- PHP22期基础班总结
- WPF后台写ControlTemplate总结
- Reactor和Proactor模式
- 把H5打包成IOS APP其实可以很简单!签名?越狱?都不需要!
- rt-thread中动态内存分配之小内存管理模块方法的一点理解
- PlantUML windows android
- Python 区分方法和函数
- 堆&;栈
- javaweb笔记四
- Swift 下标脚本
- Android lrucache 实现与使用(Android内存优化)
- 【Web】Tomcat中利用Session识别用户的基本原理
热门文章
- 【转】Unity 相关经典博客资源总结(持续更新)
- HDOJ/HDU 1321 Reverse Text(倒序输出~)
- nginx主配置文件 在那找怎么打开
- Service的两种启动方法
- 上海Uber优步司机奖励政策(1月25日~1月31日)
- [AngularJS + Webpack] Requiring Templates
- android 21 隐式意图启动系统预定义activity
- java按照集合中元素的属性进行排序示例代码
- Android Studio学习随笔-UI线程阻塞以及优化
- (转)function($){}(window.jQuery) 是什么意思?