首先来看布局:
初始状态是:
当滚动条滚动到粉色的盒子到达顶部的时候返回顶部的小盒子显示出来:
最后需要实现点击返回顶部返回到刚开始的状态。
需要了解的知识点:
1.得到元素距离页面顶部的距离采用scrollTop()方法
2.页面滚动事件$(window).scroll(function(){})
3.元素的淡入和淡出采用fadeIn()和fadeOut()方法
4.返回顶部的动画不能采用$(doucument).animate()因为只有元素能添加动画,只能采用$('body,html').animate({scrollTop:0})
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">