JavaScript實現返回頂部功能
阿新 • • 發佈：2019-01-09
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>