Js返回顶部

来源：互联网发布：大数据展现工具编辑：程序博客网时间：2024/05/18 06:01

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>