点击回到顶部

公告

View Post

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{
width: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);
});

});

posted on 2018-03-12 17:37 sunshinezjb 阅读(246) 评论(0) 收藏举报

刷新页面返回顶部