<!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>回到顶部</title>
<style>
body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,code,form,input,textarea,p,th,td,fieldset,legend,figure{
margin:0;
padding:0;
}
body{
font-family:"微软雅黑",Arial;
}
ul,ol{
list-style:none;
}
a{
text-decoration:none;
}
img{
border:0;
}
div{
font-size: 40px;
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid grey;
position: fixed;
right: 0;
bottom: 20%;
text-align: center;
line-height: 50px;
display: none;
cursor: pointer;
}
ul{
width: 100%;
height:500px;
}
</style>
<body>
<div class="box">^</div>
<ul style="background:red"></ul>
<ul style="background:yellow"></ul>
<ul style="background:blue"></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</body>
</html>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$(".box").fadeIn(700);
}
else
{
$(".box").fadeOut(700);
}
});
$(".box").click(function(){
$('body,html').animate({
scrollTop:0
},700);
return false; //防止冒泡
});
});
</script>
