html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>点击回到顶部</title>
<link href="css/demo1.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/demo1.js"></script>
</head>
<body>
<div id="d1"></div>
</body>
</html>
css:
* {
padding:0px;
margin:0px;
}
body{/*窗体加个背景图片 设置窗体的高度（图片的高度）*/
height:4773px;
background-image:url(../img/bg.png);
}
/*按钮的宽度 高度 按钮图片 */
#d1{
96px;
height:96px;
background-image:url(../img/top.gif);
position:fixed;/*固定定位*/
right:0px;
bottom:0px;
display:none;/*隐藏*/
}
js:
/// <reference path="jquery-1.10.2.min.js" />
var timer;
$(function () {
var dHeight = $(window).height();//获取窗体的高度
$(document).scroll(function () {//对网页执行的一个scroll事件
var top = $(document).scrollTop();//拖动滚动条的时候 距离浏览器顶部的距离
if (top > dHeight) {
$("#d1").show();
} else {
$("#d1").hide();
}
});
//点击箭头的时候 回到顶部
$("#d1").click(function () {
timer = setInterval(function () {
var backtop = $(document).scrollTop();
var step = backtop / 5;//每次移动多少
$(document).scrollTop(backtop - step);
if (backtop == 0) {
clearInterval(timer);
}
}, 30);
});
});