欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

js之css格式之scrolltop跟offsettop

更新时间: 2014-01-05 00:53:42 责任编辑: Author_N1

 

js之css格式之scrollTop和offsetTop


关于在jquery中的scrollTop
最近看懂了一幅图:



说明:
offset (抵消、合并)

offsetTop:合并后的高度
scrollTop:已滚动过去的高度
scrollHeight:滚动显示区的高度



2、scrollTop 附练习
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                  $(".btn1").click(function(){
                    $("div").scrollTop(100);
                  });
                  $(".btn2").click(function(){
                    alert($("div").scrollTop()+" px");
                  });
            });
        </script>
    </head>
    <body>
        <div style="border:1px solid black;width:200px;height:200px;overflow:auto">
            This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
        </div>
        <button class="btn1">把 scroll top设置为 100px</button>
        <br />
        <button class="btn2">获得当前的 scroll top</button>
    </body>
</html>

效果图:



scroll练习
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
                function insertcode() {
                    var $body = $("body");
                    $body.append('<div style=\" height:1000px; font-size:24px;\">新增项目</div>')
                    $("#page_tag_load").hide();
                }
                $(document).ready(function () {
                    $(window).scroll(function () {
                        var $body = $("body");
                        var $html = "";
                        $html += "<br/>" + ($(window).height() + $(window).scrollTop());
                        $html += "<br/>window.height: " + $(window).height();
                        $html += "<br/>body.height: " + $body.height();
                        $html += "<br/>window.scrollTop: " + $(window).scrollTop();
                        $("#page_tag_bottom").html($html);
                        /*判断窗体高度与竖向滚动位移大小相加 是否 超过内容页高度*/
                        if (($(window).height() + $(window).scrollTop()) >= $body.height()) {
                            $("#page_tag_load").show();
                            //setTimeout(insertcode, 1000);/*IE 不支持*/
                            insertcode();
                        }
                    });
                });
    </script>
</head>
<body>
    <div style=" height:1000px; font-size:24px;">新增项目</div>
    <div id="page_tag_bottom" style=" width:100%; position:fixed; top:0px; background-color:#cccccc;height:100px;"></div>
    <div id="page_tag_load" style=" display:none; font-size:14px;position:fixed; bottom:0px; background-color:#cccccc;height:50px;">加载中...</div>
</body>
</html>


效果图:






引用:

http://bbs.csdn.net/topics/350002826
http://www.cnblogs.com/freewind/archive/2008/05/20/1203183.html


















-
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 00:53:42
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1105/
本文WWW.DOC100.NET DOC100.NET版权所有。