原生js实现回到顶部
2016-12-16 00:00
330 查看
网页可见区域宽: 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
网页可见区域高: 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>
相关文章推荐
- 原生js实现淘宝首页回到顶部效果
- 原生JS实现平滑回到顶部组件
- 原生js实现吸顶导航和回到顶部特效
- 原生JS实现平滑回到顶部组件
- Back Top ①(回到顶部)原生JS实现
- js+css实现“回到顶部”的几个关键点---Day10
- JS实现回到顶部效果
- js 回到顶部的实现
- 原生Js回到顶部效果
- JS回到顶部按钮实现源代码
- 使用js实现回到页面顶部
- js实现网页页面回到顶部
- 基于JS实现回到页面顶部的五种写法(从实现到增强)
- 基于JS实现回到页面顶部的五种写法(从实现到增强)
- 页面回到顶部的三种实现(锚标记,js)
- JS实现回到页面顶部动画效果的简单实例
- 常用小Demo:用js/jQuery实现回到页面顶部功能
- 滚动页面时DIV到顶部时fixed(原生js实现)