1.jquery尺寸“：
2.jquery位置：
3.返回顶部案例：
index.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
padding: 0;
}
.box{
margin-left: 300px;
margin-top: 300px;
margin-bottom: 1000px;
}
.about{
position: relative;
width: 1000px;
background: darksalmon;
height: 600px;
display: inline-block;
}
span{
position: absolute;
right: 0;
top: 600px;
color: saddlebrown;
cursor: pointer;
display: none;
}
</style>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<div class="box">
<div class="about"></div>
<span>返回顶部</span>
</div>
<script>
$(function () {
var top = $('.about').offset().top
$(document).scroll(function () {
if ($(document).scrollTop() >= top){
$('span').css({
'position':'fixed'
}).fadeIn();
}else {
$('span').fadeOut()
}
});
$('span').on('click',function () {
// $(document).scrollTop(0) // 没有动画效果
$('body,html').stop().animate({
scrollTop:0
});
// $(document).stop().animate({ //使用animate不能是文档 而是html和body元素做动画
// screenTop:0
// });
})
})
//3.2参数：
//（1）params：想要更改的样式属性，以形象形式传递，必须写。属性名可以不用带引号，如果复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略
//（2）speed:三中预定速度之一的字符串（“slow”,"normal",or"fast"）或表示动画时长的毫秒数值（如：1000）
//（3）easing:(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”
//（4）fn:回调函数，在动画完成时执行的函数，每个元素执行一次
</script>
</body>
</html>
运行结果：
2.电梯导航案例
index.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.floor{
position: relative;
}
.floor .w:nth-child(1){
width: 80%;
height: 300px;
background: darksalmon;
margin-left: 100px;
margin-top: 200px;
}
.floor .w:nth-child(2){
width: 80%;
height:300px;
background: greenyellow;
margin-left: 100px;
}
.floor .w:nth-child(3){
width: 80%;
height: 300px;
background: skyblue;
margin-left: 100px;
margin-bottom: 600px;
}
.tool{
position: absolute;
left: 0;
top: 0;
display: none;
}
.tool li{
width: 60px;
height: 40px;
color: darksalmon;
cursor: pointer;
list-style-type: none;
}
.current{
color: green!important;
}
</style>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<div class="floor">
<div class="w">手机box1</div>
<div class="w">电脑box2</div>
<div class="w">平板box3</div>
</div>
<div class="tool">
<ul>
<li class="current">手机</li>
<li>电脑2</li>
<li>平板3</li>
</ul>
</div>
<script>
// // 1.jquery实现
//
$(function () {
// 当我们点击小li，此时不需要执行 页面滚动事件里面的li,的背景选择 添加current
// 节流阀，互斥锁
var flag = true
var toollTop = $('.floor').offset().top
toggleTool()
function toggleTool(){
if ($(document).scrollTop() >= toollTop){
$('.tool').css({
position:'fixed',
top:toollTop+'px'
}).fadeIn()
} else {
$('.tool').fadeOut()
}
}
$(document).scroll(function (e) {
toggleTool()
// 3.页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名
// 判断如果滚动的距离大于该区域的距离，那么显示对应li中的current类名
if (flag){
$('.w').each(function (i,ele) {
if ($(document).scrollTop() >= $(ele).offset().top){
$('.tool li').eq(i).addClass('current').siblings().removeClass('current')
}
})
}
});
// 2.点击电梯导航页面可以滚动到相应内容区域
$('.tool li').click(function () {
flag = false
// 但我们每次点击li 就需要计算出页面要去往的位置
// 选出对应索引号的内容区域的盒子，计算出它的offet().top
var index = $(this).index()
// console.log(index);
current=$('.w').eq(index).offset().top
$('body,html').stop().animate({
scrollTop:current
},function () {
flag = true
});
$(this).addClass('current').siblings().removeClass('current')
})
})
// window.addEventListener('load',function () {
// var floor = document.querySelector('.floor')
// // console.log(floor.querySelectorAll('.w')[2]);
// var top = floor.offsetTop
// var tool = document.querySelector('.tool')
// window.addEventListener('scroll',function (e) {
// if (window.pageYOffset >= top){
// tool.style.position = 'fixed';
// tool.style.top = top + 'px'
// tool.style.display = 'block'
// }else {
// tool.style.display = 'none'
// }
// });
//
// var li =tool.querySelectorAll('li')
// for (var i=0;i<li.length;i++){
// li[i].setAttribute('index',i)
// li[i].addEventListener('click',function () {
// var index = this.getAttribute('index')
// // console.log(index);
// // 没有缓动效果
// // 1.document.documentElement.scrollTop = floor.querySelectorAll('.w')[index].offsetTop
// //2. window.scroll(0,floor.querySelectorAll('.w')[index].offsetTop)
//
// // console.log(window.pageYOffset);
// 3.
// animate(window,floor.querySelectorAll('.w')[index].offsetTop)
// console.log(floor.querySelectorAll('.w')[index]);
// console.log(floor.querySelectorAll('.w')[index].offsetTop);
// })
// };
//
//
// function animate(obj,target,callback) {
// clearInterval(obj.timer)
// obj.timer = setInterval(function () {
// var step = (target - window.pageYOffset) / 10
// step = step > 0 ? Math.ceil(step) : Math.floor(step)
// if (window.pageYOffset == target){
// clearInterval(obj.timer)
// if (callback){
// callback()
// }
// }
// // obj.style.left = obj.offsetLeft + step + 'px'
// // window.scroll(0,0) 表示返回x,y的0位置的距离，即顶部距离
// window.scroll(0,window.pageYOffset + step)
//
// },30)
// }
//
// })
</script>
</body>
</html>
运行结果：
