一、案列演示
二、html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
height: 2000px;
}
.back {
position: fixed;
width: 50px;
height: 50px;
background-color: pink;
right: 30px;
bottom: 100px;
display: block;
}
.container {
width: 900px;
height: 500px;
background-color: skyblue;
margin: 400px auto;
}
</style>
//自己修改路径
<script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="back">返回顶部</div>
<div class="container">
</div>
<script>
$(function(){
//js部分
})
</script>
</body>
</html>
三、js部分
1.返回顶部div显示和隐藏
代码如下（示例）：
//窗口滚动事件
$(window).scroll(function(){
//获取页面滚动的距离，值随滚动而改变
var scrollTop=$(document).scrollTop();
//获取div元素到距离顶部的距离，固定值
var top=$(".container").offset().top;
//当滚动距离大于等于top时，返回顶部div出现，反之消失
if(scrollTop>=top){
//淡入显示匹配元素
$(".back").fadeIn();
}else{
//淡出隐藏匹配元素
$(".back").fadeOut();
}
})
1.1 知识点
$(document) 是当前文档，就是你看到的整个网页
scrollTop()方法用于获取或设置元素被卷进去的头部距离
offset().top方法用于获取相当于文档顶部的偏移坐标
2.点击div返回顶部
代码如下（示例）：
$(".back").click(function(){
$("html,body").stop().animate({
//设置必须值，速度默认normal
scrollTop:0
})
})
})
2.1 知识点
自定义动画animate()
animate(params,[speed],[easing],[fn])
参数说明：
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称，默认jQuery提供"linear" 和 “swing”.
fn:在动画完成时执行的函数，每个元素执行一次
1559
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
