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

阿大的冰棒

于 2022-11-10 20:29:49 发布

阅读量237

点赞数

文章标签： jquery 学习前端

本文链接：https://blog.youkuaiyun.com/qq_53582888/article/details/127794219

版权

这篇博客详细介绍了jQuery中关于元素尺寸和位置的API，包括offset()用于获取元素相对于文档的偏移，position()返回相对于定位父元素的偏移，以及scrollTop()和scrollLeft()用于处理滚动条位置。文中还通过实例演示了如何实现回到顶部的动画效果，强调了animate()方法的应用和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>