jquery实现窗口滚动条下拉，显示直达顶部的图片，点击图片返回顶部.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style type="text/css">
body {
height: 2000px;
}
img {
display: none;
}
.box {
position: relative;
height: 2000px;
}
div .wrap img {
position: fixed;
bottom: 10px;
right: 10px;
}
</style>
<script text="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="box">
<div class="wrap"><img src="img/gotop.png"></div>
</div>
<script>
$(function(){
// 往下拉，出现广告框
$(window).scroll(function(){
var height = $(window).height();
// alert($(window).height());
if ($(window).scrollTop() >= height * 0.5) {
$("img").stop().fadeIn(1000);
} else {
$("img").stop().fadeOut(1000);
}
});
// 点击图片，图片滚动条立即回到顶端
$("img").click(function () {
$("html,body").stop().animate({
scrollTop: 0
},1500)
});
});
</script>
</body>
</html>执行效果：
往下拖动鼠标，到达一定的位置，显示图片
往上托定滚动条到一定位置，图片消失
点击图片，回到顶部
