一、PC端

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<!------------------------------------------css样式的影响原则：是否存在继承------------------------------------------>
<!--上下级，同级，浮动别-position和float（浮动且保持原位置级别）-->

<!--滚动条是浏览器右边顶部出现滚动条-->
<!--不做任何css设置情况下htmlh和body的高宽度-->
<!--html的高宽度：1349 x 2018，1349不包括左边的滚动条宽度值，缩小浏览器，html的宽度会缩小-->
<!--body的高宽度继承的是html的高宽度-->

<!--出现滚动条的原则：A标签元素设置一定的高宽度范围，A包含的内容超出了高宽度，则默认会出现滚动条，假如有div#a和div#b，a为父级，b为子级，a包含着b-->
<div id="scroll" style="overflow: scroll;height:200px;width:500px;">
    <div style="width:2500px;height:2000px;border:1px solid #ccc;background:#ccc;">
        <div id="div1">11111111111111111111111111111111111111111111111111111111111111111111111111</div>
        <div id="div2">22222222222222222222222222222222222222222222222222222222222222222222222222</div>
        <div id="div3">33333333333333333333333333333333333333333333333333333333333333333333333333</div>
        <div id="div4">44444444444444444444444444444444444444444444444444444444444444444444444444</div>
        <div id="div5">55555555555555555555555555555555555555555555555555555555555555555555555555</div>
        <div id="div6" style="position:relative;top:0px;left:0px;">
            <div id="div6_1" style="position:absolute;left:20px;top:15px;">此处为div-position:absolute，<br />是相对于div-position-relative的而言<br />点击position()方法测试按钮试试</div>
        </div>
    </div>
</div>
<button id="test">test</button>
<button id="position">position()方法测试</button>
<script type="text/javascript">
    $("#test").click(function () {
        //$("#scroll").scrollTop("300"); //瞬间值得，没有滑动过程
        //alert($("#scroll").scrollTop()); //即可设置值，亦可输出值

        //var scrollHeight = $('#scroll').prop("scrollHeight"); //滚动条的高度
        //$("#scroll").animate({scrollTop:scrollHeight}, 400);

        //某个元素到最外层元素的顶部的距离
        var _topHeight = $("#div5").offset().top; //如果是position类型的样式，则使用-position()-left-top
        $("#scroll").animate({ scrollTop: _topHeight });
    });

    $("#position").click(function () {
        alert("div#div6-position-relative的到父级顶部的距离："+$("#div6").position().top); //相对最外层的div-114px
        alert("div#div6_1到父级顶部的距离，absolute的父级是relative的距离："+$("#div6_1").position().top); //相对上层的-position:relative-div
    });

    //循环整个html文档 - 判断有滚动条-滚动高度的标签元素 - html-body
    $("body").each(function () {

        if ($(this).prop("scrollHeight") > 0)
            $(document.body).append("元素标签名称：" + $(this).get(0).tagName + "，滚动条高度（可移动范围）：" + $(this).prop("scrollHeight"));
    });
</script>



<div id="testDiv" style="position:absolute;bottom:0px;right:100px;">

</div>
<script type="text/javascript">

    var windowHeight = $(window).height(); //浏览器当前窗口“可视区域”高度 
    var windowWidth = $(window).width(); //浏览器当前窗口“可视区域”宽度
    $("#testDiv").append("<div>浏览器当前窗口“可视区域”高度 ：" + windowHeight + "</div>");
    $("#testDiv").append("<div>浏览器当前窗口“可视区域”宽度 ：" + windowWidth + "</div>");

    var htmlHieght = $("html").height(); //html标签的高度
    var htmlWidth = $("html").width();  //html标签的宽度
    $("#testDiv").append("<div>html-高度：" + htmlHieght + "</div>");
    $("#testDiv").append("<div>html-宽度：" + htmlWidth + "</div>");
</script>

二、手机端

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<style type="text/css">
    body, html {
        margin: 0;
        padding: 0;
    }
</style>

<!--在苹果手机上使用-webkit-overflow-scrolling:touch，解决overflow:scroll;，滑动卡顿的情况-->
<div id="div" style="width:100%;height:300px;border:1px solid #ccc;overflow:scroll;-webkit-overflow-scrolling : touch;position:fixed;bottom:0px;">
    <div id="scrollDiv"></div>
    <script type="text/template" id="template">
        <div style="width:100%;height:200px;background:#cacaca;"></div>
        <div style="width:100%;height:200px;background:#099dff;"></div>
    </script>
    <div style="display:none;">
        <div style="width:100%;height:200px;background:#cacaca;"></div>
        <div style="width:100%;height:200px;background:#099dff;"></div>
        <div style="width:100%;height:200px;background:#cacaca;"></div>
        <div style="width:100%;height:200px;background:#099dff;"></div>
        <div style="width:100%;height:200px;background:#cacaca;"></div>
        <div style="width:100%;height:200px;background:#099dff;"></div>
        <div style="width:100%;height:200px;background:#cacaca;"></div>
        <div style="width:100%;height:200px;background:#099dff;"></div>
        <div style="width:100%;height:200px;background:#cacaca;"></div>
        <div style="width:100%;height:200px;background:#099dff;"></div>
        <div style="width:100%;height:200px;background:#cacaca;"></div>
        <div style="width:100%;height:200px;background:#099dff;"></div>
        <div style="width:100%;height:200px;background:#cacaca;"></div>
        <div style="width:100%;height:200px;background:#099dff;"></div>
        <div style="width:100%;height:200px;background:#cacaca;"></div>
        <div style="width:100%;height:200px;background:#099dff;"></div>
        <div style="width:100%;height:200px;background:#cacaca;"></div>
        <div style="width:100%;height:200px;background:#099dff;"></div>
        <div style="width:100%;height:200px;background:#cacaca;"></div>
        <div style="width:100%;height:200px;background:#099dff;"></div>
        <div style="width:100%;height:200px;background:#cacaca;"></div>
        <div style="width:100%;height:200px;background:#099dff;"></div>
    </div>
</div>

<div id="canMoveTop"></div>
<div id="top"></div>
<script type="text/javascript">

    //用touchmove等事件实现下拉刷新
    
    $("#scrollDiv").html($("#template").html());

    $(document).scroll(function (e) {

        $("#div").focus();
    });

    var _height = parseInt($("#scrollDiv").prop("scrollHeight"));
    var canMoveTop = _height - parseInt($("#div").height());
    $("#canMoveTop").html(canMoveTop);

    $("#div").scroll(function (e) {

        var scrollTop = Math.abs(parseInt($("#scrollDiv").offset().top));
        $("#top").html(scrollTop);
        canMoveTop = parseInt($("#scrollDiv").prop("scrollHeight")) - parseInt($("#div").height());
        $("#canMoveTop").html(canMoveTop);

        if (scrollTop >= canMoveTop-10) {
            $("#scrollDiv").append($("#template").html());
        }

        //e.preventDefault();
    });
</script>