网页可见区域宽： 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. hdoj 1599 find the mincost route【floyd+最小环】

    find the mincost route Time Limit: 1000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...

  2. Oracle中trunc函数、round 函数、ceil函数和floor函数的使用

    Oracle中trunc函数.round 函数.ceil函数和floor函数的使用 1.1trunc函数处理数字 trunc函数返回处理后的数值,其工作机制与ROUND函数极为类似,只是该函数不对指定 ...

  3. Apache服务器部署多个进程

    本文以xampp安装的apache服务为例进行介绍 1.复制配置文件目录,复制一个新的配置文件目录conf2,区别于原来的配置文件目录conf

  4. JS：九宫格抽奖转盘实例

    工作需要,所以做了个抽奖转盘的插件,当然这里只做最简单的演示.可以用于取代一些flash抽奖程序. 机制说明: 1.通过定义lottery-unit来控制节点的个数及索引: 2.通过设置lottery ...

  5. The app references non-public selectors in Payload

    上周上传app到appstore在validation完后有警告提示"The app references non-public selectors in Payload/wacao.app ...

  6. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载四（使用程序载入事件）

    在了解了PhoneGap中都有哪些事件之后,本节将開始对这些事件的使用方法进行具体地介绍.本节要介绍的是程序载入事件,也就是deviceready.pause和resume这3个事件. [范例4-2 ...

  7. Ubuntu 14.04 没有system settings的解决方法

    在我的Dell Latitude 3330上, 新装的Ubuntu 14.04一切正常,就是没有system settings程序, 以下的命令能够解决: sudo apt-get install u ...

  8. hadoop的wordcount的改动版

    //这个是在原来的基础上改动以后得到的,将当中的分词的根据给换掉了,而且进行词频统计的时候会自己主动的忽略大写和小写 packageorg.apache.hadoop.mapred; importja ...

  9. android 54 播放音视频

    mainActivity: package com.sxt.day07_09; import java.util.ArrayList; import java.util.HashMap; import ...

  10. Java SE 6 新特性: HTTP 增强--转

    概述 Java 语言从诞生的那天起,就非常注重网络编程方面的应用.随着互联网应用的飞速发展,Java 的基础类库也不断地对网络相关的 API 进行加强和扩展.在 Java SE 6 当中,围绕着 HT ...