网页可见区域宽： 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. 关于HttpsURLConnection的连接问题

    本地测试好的项目拿到服务器上后,通过SSL连接,将Http改成Https,并指定了服务器的IP,结果连接失败.查了资料后发现,直接指定IP,SSL是无法定位连接的,实际上应该指定服务器端配置好的Hos ...

  2. java---Unicode-字符转换器

    实现一个字符(包括汉字)的简单互相转换: package cn.hncu.gui2; import java.awt.Button; import java.awt.Color; import jav ...

  3. [cocos2dx 3.0 + xcode]疑难点记录

    1: 新项目创建 1.下载最新Python,安装 2.解压引擎包 3.运行终端,切换到引擎目录(直接cd拖动文件夹到光标即可得到路径) 4.按照文档例子: $ cd cocos2d-x $ ./set ...

  4. hdu 4405概率dp

    #include <cstdio> #include <cstring> #include <iostream> #include <cmath> #i ...

  5. Tomcat绑定多个IP地址 多域名绑定

    http://blog.csdn.net/stevenyanzhi/article/details/6029776 Tomcat绑定多个IP地址 如果一台服务机上有多个IP地址又有多个工程如何一个IP ...

  6. 使用Morphia框架操作mongodb

    1.  mac 下 安装mongodb sudo brew update sudo brew install mongodb sudo brew services mongodb start 2.   ...

  7. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（19）-权限管理系统-用户登录

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(19)-权限管理系统-用户登录 我们之前做了验证码,登录界面,却没有登录实际的代码,我们这次先把用户登录先 ...

  8. Android 颜色渲染(八) SweepGradient扫描/梯度渲染

    版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] Android 颜色处理(八) SweepGradient 扫描/梯度渲染 为什么什么叫扫描渲染呢?  相信大家都看过雷达扫描的 ...

  9. 生成N个不重复的随机数(转)

    有25幅作品拿去投票,一次投票需要选16幅,单个作品一次投票只能选择一次.前面有个程序员捅了漏子,忘了把投票入库,有200个用户产生的投票序列为空.那么你会如何填补这个漏子? 当然向上级反映情况.但是 ...

  10. mysql优化21条

    今天一个朋友向我咨询怎么去优化 MySQL,我按着思维整理了一下,大概粗的可以分为21个方向. 还有一些细节东西(table cache, 表设计,索引设计,程序端缓存之类的)先不列了,对一个系统,初 ...