JavaScript实现返回顶部功能

01.<head runat="server">  
02.    <title></title>  
03.   <style type="text/css">  
04.#gotopbtn{position:absolute;top:expression(eval(document.documentElement.scrollTop + 350));}   
05.</style>  
06.<![endif]-->  
07.<style type="text/css">  
08.body{  
09. 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>  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值