您的位置：首页 > Web前端 > JavaScript

Js返回顶部

2012-04-06 21:47 393 查看

Js返回顶部
1.
<head runat="server">
2.
<title></title>
3.
<style type="text/css">
4.
#gotopbtn{position:absolute;top:expression(eval(document.documentElement.scrollTop + 350));}

5.
</style>
6.
<![endif]-->
7.
<style type="text/css">
8.
body{
9.
font:12px Verdana, Geneva, sans-serif;
10.
line-height:1.2;
11.
text-align:center;
12.
}
13.
#gotopbtn {

14.
width:20px;
15.
height:100px;
16.
background:#fff;
17.
position:fixed;
18.
bottom:100px;
19.
right:330px;
20.
display:none;
21.
cursor:pointer;
22.
font-size:14px;
23.
line-height:30px;
24.
}
25.
.main{
26.
width:50%;
27.
height:1500px;
28.
background-color:Green;
29.
margin:0 auto;
30.
}
31.
</style>
32.
</head>
33.
<body>
34.
<div class="main"></div>
35.
<div id="gotopbtn">返回顶部</div>
36.
<script type="text/javascript">
37.
idTest = document.getElementById('gotopbtn');
38.
idTest.onclick = function () {
39.
document.documentElement.scrollTop = 0;
40.
sb();
41.
}
42.
window.onscroll = sb;
43.
function sb() {
44.
if (document.documentElement.scrollTop == 0) {
45.
idTest.style.display = "none";
46.
} else {
47.
idTest.style.display = "block";
48.
}
49.
}
50.
</script>
51.
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航