javascript 窗口宽高滚动

            //不加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>

 $('html, body').animate({scrollTop: $("#"+id).offset().top-20}, 200);