scrollTop,offset().top

1.scrollTop是指滚动条滚动的距离

如果没有出现滚动条，则距离为0

css:

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        input{
            position: fixed;

        }
        .div1{
            width: 200px;
            height: 200px;
            overflow-y: scroll;
            border: 1px solid #d74147;
        }
        .div3{
            width: 200px;
            height: 200px;
            border: 1px solid #d74147;
            margin: 10px 0;
        }.div4{
                     width: 30px;
                     height: 30px;
                     background: #dd8811;
        }
        .div2{
            width: 30px;
            height: 130px;
            background: #dd0077;
            overflow-y: scroll;
        }
    </style>

　　body:

<input type="button" value="点击"/>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<div class="div1">
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
</div>

    <div class="div2">
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
    </div>

<p class="div5">1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>

<div class="div3">
    <div class="div4">
    </div>
</div>

　　js

$(function(){
            $('input').click(function() {
                //alert($('.div2').scrollTop());

                //alert($('.div1').offset().top);//90

                //alert($('body').scrollTop());

                //alert($('.div1').offset().top);
                //alert($('body').offset().top);
                alert($('html').offset().top);//负数是因为找不到
                //alert($('html').scrollTop());
                //alert($('.div1').scrollTop());


            });
        });

　　

2offset().top指的是到文档的距离

不是到可视区域的文档的距离，是最顶部的文档的距离

 

http://www.heishou.com.cn/点击这个链接，交流论坛黑手安全网

转载于:https://www.cnblogs.com/shenq/p/4968341.html