<!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>
element.style {
display: block;
}
.right-gotop {
bottom: 210px;
display: none;
height: 50px;
position: fixed;
right: 5px;
width: 50px;
}
.right-gotop a {
background: #f4543c url("http://www.51yuansu.com/component/base/img/backtop.png") no-repeat scroll center center;
display: block;
height: 50px;
width: 50px;
}
a {
color: #666;
text-decoration: none;
transition: all 0.15s ease 0s;
}
</style>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
// alert($(window).scrollTop());
$(".right-gotop").fadeIn(100);
} else {
$(".right-gotop").fadeOut(100);
}
});
$("#right-gotop").click(function() {
$('body,html').animate({
scrollTop: 0
}, 600);
});
})
</script>
</head>
<body style="height: 100000px">
<div class="right-gotop">
<a id="right-gotop" title="返回顶部" href="javascript:void(0);"></a>
</div>
</body>
</html>