在许多网站我们都会见到,当页面滚动到一定位置的时候,为了更好的用户体验,都会在下面出现一个‘返回顶部’的图标,用户点击该图标,会回到页面顶部。
这个效果其实并没有想象中那么复杂,需要了解scrollTop()这个API ,这个是jQuery中的方法,该方法返回或设置匹配元素的滚动条的垂直位置,当在页面顶部时,位置是0。
所以通过$(window).scrollTop()就可以拿到滚动条的实时位置,只要判断这个值超过一定高度,就执行我们的显示“返回顶部”图标的代码,点击图标,再执行将滚动条高度变为0,然后加上动画效果即可实现。
实现步骤:
- 引入jquery.js
- 创建一个div的盒子,设置背景宽高,固定定位,背景填充图片,以及初始display值为none,不显示
- 拿到滚动条的位置,判断是否超过指定高度,当超过的时候,让盒子显示,否则盒子隐藏
- 点击盒子,滚动到页面最顶部,也就是滚动条的垂直高度为0
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
body {
height: 4000px;
}
.goTop {
position: fixed;
bottom: 50px;
right: 0px;
width: 80px;
height: 50px;
display: none;
z-index: 100;
background: url(images/gotop.jpg) no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<div class="goTop"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
var $goTop = $(".goTop");
$(window).scroll(function() {
var high = $(window).scrollTop();
// 三元表达式进行高度判断
high >=2000 ? $goTop.fadeIn() : $goTop.fadeOut
})
// 给html做动画,修改html的scrollTop
// 写上html,body 是为了更好的兼容更多的浏览器
$("html, body").animate({
scrollTop: 0
});
})
});
</script>
</body>
</html>