网页可见区域宽： 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. [QT]构建正则表达式测试

    正则表达式是个强大的东西 暂时先记录一个用法: QString str = "Peak memory: KEY s"; QString data = "Peak memo ...

  2. ACM1720_A+Bcoming(进制转换的新思路）——代码超少哟！

    using namespace std; int main() { int a,b; while(cin>>hex>>a>>b) { cout<<dec ...

  3. Anjuta 调试无输出 warning: GDB: Failed to set controlling terminal

    调试无输出,起初以为是那个warning的问题,后来才知道这个系统printf直到遇到'\n'换行符才输出,VC6用习惯了没想到还有这样的,网上说这样是节省系统资源. 那个warning暂时还没看到影 ...

  4. 深入分析Java的序列化与反序列化

    序列化是一种对象持久化的手段.普遍应用在网络传输.RMI等场景中.本文通过分析ArrayList的序列化来介绍Java序列化的相关内容.主要涉及到以下几个问题: 怎么实现Java的序列化 为什么实现了 ...

  5. SVN 资源库报错 E175002

    遇到一个问题, svn: E175002: OPTIONS request failed on '/' Connection timed out: connect 试了网上好多办法,都没有,最后公司大 ...

  6. 352. Data Stream as Disjoint Intervals

    Plz take my miserable life T T. 和57 insert interval一样的,只不过insert好多. 可以直接用57的做法一个一个加,然后如果数据大的话,要用tree ...

  7. google、baidu高级搜索技巧

    1.baidu(可以去高级搜索查看更多信息) intitle搜索范围限定在网页标题:intitle:和后面的关键词之间不要有空格----intitle:中国 site搜索范围限定在特定站点中:“sit ...

  8. 深入解析Java中volatile关键字的作用

    转(http://m.jb51.net/article/41185.htm)Java语言是支持多线程的,为了解决线程并发的问题,在语言内部引入了 同步块 和 volatile 关键字机制 在java线 ...

  9. 弹出窗口zDialog的使用

    因为没有元素可以显示到Frameset上面去,所以重新定义了,一个index.htm,对其的操作是: Index.htm    <script language="javascript ...

  10. GDB调试总结__1

    该博客旨在分享IT技术心得和实际工作中遇到问题的解决方法,下面是新浪博客地址http://blog.sina.com.cn/qianyumolu,则为分享经济.行业趋势.心灵文章等,有兴趣的朋友能够踩 ...