网页可见区域宽： 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>

原生js实现回到顶部的更多相关文章

  1. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 基于原生js的返回顶部组件，兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

  3. js实现回到顶部功能

    js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...

  4. 页面滚动事件和利用JS实现回到顶部效果

    页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

  5. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

  6. js——页面回到顶部

    很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...

  7. js实现回到顶部操作

    <a href="javascript:;" id="btn" title="回到顶部"></a> 样式: #btn ...

  8. 原生js实现返回顶部特效

    index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  9. 原生JS实现返回顶部和滚动锚点

    ;(function (window,doc,undefined) { function rollingAnchor(){ this.timer =''; } rollingAnchor.protot ...

随机推荐

  1. Jacob - Outlook

    import com.jacob.activeX.ActiveXComponent; import com.jacob.com.Dispatch; public class Util { public ...

  2. Java中的包

    包:定义包用package关键字. 1:对类文件进行分类管理. 2:给类文件提供多层名称空间. 如果生成的包不在当前目录下,需要最好执行classpath,将包所在父目录定义到classpath变量中 ...

  3. Debian添加软件源

    安装完渗透测试系统kali linux后,默认的只有security这个源,只更新那些集成的安全软件,不能安装其他新软件,官网给出了3类源: Kali Linux提供了3类软件源,这些源在世界各地都有 ...

  4. Oracle设计规范！

    Oracle设计规范! 一哥们整理的Oracle的设计规范,相当的不错,贴这以备后续之需! 目录 1.数据库模型设计方法规范 1.1.数据建模原则性规范 1.2.实体型之间关系认定规范 1.3.范式化 ...

  5. CSS 概览（CSS2.1）更新时间2014-0406

    CSS和HTML结合 <link rel="stylesheet" type="text/css" href="sheet1.css" ...

  6. ubuntu制作usb启动盘

    准备: u盘 iso镜像文件--ubuntu-12.04.2-desktop-amd64.iso 烧盘软件--unetbootin-linux-583 步骤: 格式化u盘 查看u盘信息 #mount/ ...

  7. lost connection to mysql server reading initial communication packet

  8. 三分钟读懂Oracle数据库容灾架之DataGuard

    Oracle数据库目前依然处于商用数据库的霸主地位. 运行在Oracle数据库上的核心业务及核心数据的安全性尤为重要. 目前市场上针对Oracle数据库常见的容灾产品大致可以分为两大类. Oracle ...

  9. 使用JavaScript扫描端口

    <html>    <title>端口扫描</title>    <head></head><form><label fo ...

  10. BZOJ 3333 排队计划 树状数组+线段树

    题目大意:给定一个序列.每次选择一个位置,把这个位置之后全部小于等于这个数的数抽出来,排序,再插回去,求每次操作后的逆序对数 首先我们每一次操作 对于这个位置前面的数 因为排序的数与前面的数位置关系不 ...