【jQuery学习】jQuery尺寸 位置方法

1 jQuery尺寸

 2 jQuery位置

位置主要有三个：offset() position() scrollTop()/scrollLeft()

1、offset()获得或设置元素偏移

这个偏移相对于整个文档，和父级没有关系。

offset()里面有top和left属性，offset().left offset().top

修改偏移量：

offset({

  top:

  left:

})

2、position() 返回相对于带有定位的父级的偏移量，如果父级没有定位，则相对于文档。

只能获取，不能设置。

3、scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧值。

案例：回到顶部动画效果

注意：只有元素才能做动画，所以animate()前面一定是获取到的元素，如果对整个文档进行动画设置，则需要用$("body,html")来包装成元素。

<div class="back">返回顶部</div>
    <div class="container"></div>
    <script>
        $(function(){
            var boxTop = $(".container").offset().top;
            $(window).scroll(function(){
                if($(document).scrollTop() >= boxTop){
                    $(".back").fadeIn();
                }else{
                    $(".back").fadeOut();
                }

            })
            $(".back").click(function(){
                // $(document).scrollTop(0);
                // 利用animate实现动画效果
                // 但是animate是针对于元素的 所以 $(".body,html") 将页面包装为一个元素
                $(".body,html").stop().animate({
                    scrollTop: 0
                },5000)
            })
        })
    </script>