//不加window   IE不支持

            console.info(window.screenLeft);//IE支持火狐不支持

            console.info(window.screenX);//火狐支持，IE不支持

            //窗口

            var leftX = typeof window.screenLeft=='number'?window.screenLeft:window.screenX;

            var topY = typeof window.screenTop=='number'?window.screenTop:window.screenY;

            window.innerWidth  //窗口页面大小   ie不支持   谷歌中相等

            window.outerWidth  //窗口页面大小   +边框  

            document.documentElement.clientWidth;//所有浏览器都支持

            console.info(document.getElementById("bottom").clientWidth);//可视区宽度，不计算外边框，外边距，计算内边距，滚动条会减少宽度，在没有内边距和滚动条的情况下不设置宽度，IE会默认为0

            document.getElementById("bottom").scrollHeight;  //IE指有效高度

            document.getElementById("bottom").offsetWidth; //实际大写，浏览器都兼容//增加滚动条和外边距不计算，增加内边距会计算

            document.getElementById("bottom").getBoundingClientRect().top;    //浏览器都支持IE默认2,2

               <button id="toBottom">滚动到底部</button>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <p>111111111111111111111111111111111111111</p>

        <div id="bottom">

            你好谁大法师打发斯蒂芬

        </div>

        <button id="toTop">滚动到顶部</button>

//使指定区域可见

window.onload = function(){

                document.getElementById("toBottom").addEventListener("click",function(){

                    document.getElementById("bottom").scrollIntoView();

                },false);

                document.getElementById("toTop").addEventListener("click",function(){

                    document.getElementById("toBottom").scrollIntoView();

                },false);

            }

<!DOCTYPE HTML>

<html>

<head>

    <meta charset=UTF-8>

    <title>SCROLL</title>

    <style type="text/css">

    </style>

    <script type="text/javascript">

        var goToWhere = function (where)

        {

            var me = this;

            me.site = [];

            me.sleep = me.sleep ? me.sleep : 16;

            me.fx = me.fx ? me.fx : 6;

            clearInterval (me.interval);

            var dh = document.documentElement.scrollHeight || document.body.scrollHeight;

            var height = !!where ? dh : 0;

            me.interval = setInterval (function ()

            {

                var top = document.documentElement.scrollTop || document.body.scrollTop;

                var speed = (height - top) / me.fx;

                if (speed === me.site[0])

                {

                    window.scrollTo (0, height);

                    clearInterval (me.interval);

                }

                window.scrollBy (0, speed);

                me.site.unshift (speed);

            }, me.sleep);

        };

    </script>

</head>

<body>

<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">5</div>

<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">4</div>

<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">3</div>

<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">2</div>

<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">1</div>

<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">0</div>

<div  onclick="goToWhere(0)"

     style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 150px;">返回顶部</div>

<div  onclick="goToWhere(1)"

     style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 30px;">返回底部</div>

</body>

</html>