利用jquery实现缓慢返回顶部
利用jquery实现缓慢返回顶部
Html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
<style>
body{
height: 1900px;
}
#up {
position: fixed;
right: 30px;
bottom: 50px;
width: 70px;
height: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
display: none;
color: #000;
background: #FF0000;
}
</style>
<body>
<div id="up">返回顶部</div>
</body>
<script>
//滚动条滚动到一定的位置 才出现 返回顶部
$(window).scroll(function() {
var $scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //兼容浏览器
if($scrollTop > 150) { //滚动高度可调，也可以为某个div的scrollTop，需要的可以自行修改
$("#up").show();
} else {
$("#up").hide();
};
});
// 返回顶部
$("#up").click(function() {
$('body,html').animate({
scrollTop: 0
}, 1000);
return false;
});
</script>
</html>
注意：自己要引用jquery.js文件
