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>  
相关文章
相关标签/搜索