7.jQuery尺寸、位置操作

7.1 jQuery尺寸

jQuery常用API（七）——jQuery尺寸、位置操作_firefox

 以上jQuery方法的参数如果为空，则是获取相对应的值，返回值是数字型。

如果参数里写上了数值，则是修改对应的值。

参数可以不必写单位。

 

7.2 jQuery位置

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

1.offset() 设置或获取元素偏移

①offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。（给父级，子盒子加上相对、绝对定位也一样，与父级没有关系）

②该方法有两个属性left、top，offset().top获取文档距离文档顶部的距离，offset().left获取文档距离文档左侧的距离。

<script>
$(function(){
    // 获取对应元素的偏移
    console.log($(".son").offset().top);
    // 设置对应元素的偏移
    $(".son").offset({
        top:100,
        left:100
    })
})
</script>

2.position()获取元素偏移

①position()用于返回元素相对于带有定位的父级偏移坐标，如果父级没有定位，则以文档为准。

②只能获取不能设置

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

 1 <script>
 2 $(function(){
 3     // 当页面滚动时触发
 4     $(window).scroll(function(){
 5     // 如果文档被卷去的头部>=了150 让son元素显示，反之隐藏
 6     if($(document).scrollTop() >= 150){
 7         $(".son").show();
 8     }else {
 9         $(".son").hide();
10     }
11     });
12 })
13 </script>

此处150可以设为任意值，如当想要滚动到盒子时显示，则需先用offset获取距离，当scrolltop大于这个值显示返回盒子。

返回顶部功能实现;

scrollTop可以设置值

$(".back").click(function(){
$(document).scrollTop(100);
})

 注意：scrollTop不带有动画

 

带有动画的返回顶部

分析：

1.使用animate动画返回顶部
2.animate动画函数里面有个scrollTop属性，可以设置位置
3.但是是元素做动画(不是整个文档做动画)，因此$("body, html").animate({ scrollTop: 0 })

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <script src="jquery.min.js"></script>
10     <style>
11         body {
12             height: 2000px;
13         }
14 
15         .back {
16             position: fixed;
17             width: 50px;
18             height: 50px;
19             background-color: red;
20             right: 30px;
21             bottom: 100px;
22             display: none;
23         }
24 
25         .container {
26             width: 900px;
27             height: 500px;
28             background-color: skyblue;
29             margin: 400px auto;
30         }
31     </style>
32 </head>
33 
34 <body>
35     <div class="back">返回顶部</div>
36     <div class="container">
37     </div>
38     <script>
39         $(function () {
40             // 设置被卷去的头部
41             $(document).scrollTop(100);  // 打开此页面就已被卷去100px
42 
43             // 页面滚动事件
44             var boxTop = $(".container").offset().top;
45             $(window).scroll(function () {
46                 if ($(document).scrollTop() >= boxTop) {
47                     $(".back").fadeIn();
48                 } else {
49                     $(".back").fadeOut();
50                 }
51             });
52 
53             // 返回顶部
54             $(".back").click(function () {
55                 // $(document).scrollTop(0);  // 直接返回顶部，不带动画
56                 $("body, html").stop().animate({
57                     scrollTop: 0
58                 });  // 同时写下body、html是因为firefox、ie不支持body，而chrome支持body，为了兼容
59             })
60         })
61     </script>
62 </body>
63 
64 </html>

 

7.3 案例——品优购电梯导航