1. 程式人生 > >js之返回網頁頂部

js之返回網頁頂部

目標效果:瀏覽網頁過程中,滑動滾輪,顯示返回頂部按鈕,點選返回頂部後,返回網頁頂端。

程式碼如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 </head>
 8 <body onscroll="r()">
 9     <div style="height: 1000px;background-color:lavender"></div>
10
<a id="hide" href="#" style="display: none;height: 48px;width: 38px;background-color: bisque;position: fixed;bottom: 10px;right: 10px" onclick="f();">返回頂部</a> 11 <script type="text/javascript"> 12 function r() { 13 document.getElementById('hide').style.display = '';
14 }; 15 function f() { 16 document.body.scrollTop = 0; 17 }; 18 </script> 19 </body> 20 </html>