原生態js，返回至頂部
阿新 • • 發佈：2017-07-13
http add useragent utf ret doctype ctype urn log
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回至頂部</title> <style type="text/css"> * { margin: 0; padding: 0; } #top { width: 50px; height: 50px; background-color: red;position: fixed; right: 10px; bottom: 10px; display: none; } </style> </head> <body> <a href="javascript:;" id="top">返回至頂部</a> <h1>0000001</h1> <h1>0000002</h1> <h1>0000003</h1> <h1>0000004</h1><h1>0000005</h1> <h1>0000006</h1> <h1>0000007</h1> <h1>0000008</h1> <h1>0000009</h1> <h1>0000010</h1> <h1>0000011</h1> <h1>0000012</h1> <h1>0000013</h1> <h1>0000014</h1> <h1>0000015</h1> <h1>0000016</h1> <h1>0000017</h1> <h1>0000018</h1> <h1>0000019</h1> <h1>0000020</h1> <h1>0000021</h1> <h1>0000022</h1> <h1>0000023</h1> <h1>0000024</h1> <h1>0000025</h1> <h1>0000026</h1> <h1>0000027</h1> <h1>0000028</h1> <h1>0000029</h1> <h1>0000030</h1> <h1>0000031</h1> <h1>0000032</h1> <h1>0000033</h1> <h1>0000034</h1> <h1>0000035</h1> <h1>0000036</h1> <h1>0000037</h1> <h1>0000038</h1> <h1>0000039</h1> <h1>0000040</h1> <h1>0000041</h1> <h1>0000042</h1> <h1>0000043</h1> <h1>0000044</h1> <h1>0000045</h1> <h1>0000046</h1> <h1>0000047</h1> <h1>0000048</h1> <h1>0000049</h1> <h1>0000050</h1> <h1>0000051</h1> <h1>0000052</h1> <h1>0000053</h1> <h1>0000054</h1> <h1>0000055</h1> <h1>0000056</h1> <h1>0000057</h1> <h1>0000058</h1> <h1>0000059</h1> <h1>0000060</h1> <h1>0000061</h1> <h1>0000062</h1> <h1>0000063</h1> <h1>0000064</h1> <h1>0000065</h1> <h1>0000066</h1> <h1>0000067</h1> <h1>0000068</h1> <h1>0000069</h1> <h1>0000070</h1> <h1>0000071</h1> <h1>0000072</h1> <h1>0000073</h1> <h1>0000074</h1> <h1>0000075</h1> <h1>0000076</h1> <h1>0000077</h1> <h1>0000078</h1> <h1>0000079</h1> <h1>0000080</h1> <h1>0000081</h1> <h1>0000082</h1> <h1>0000083</h1> <h1>0000084</h1> <h1>0000085</h1> <h1>0000086</h1> <h1>0000087</h1> <h1>0000088</h1> <h1>0000089</h1> <h1>0000090</h1> <h1>0000091</h1> <h1>0000092</h1> <h1>0000093</h1> <h1>0000094</h1> <h1>0000095</h1> <h1>0000096</h1> <h1>0000097</h1> <h1>0000098</h1> <h1>0000099</h1> <h1>0000100</h1> <script type="text/javascript"> //區分瀏覽器內核 // navigator專門檢查瀏覽器特性 //match匹配 //判斷是否是谷歌瀏覽器，定義個函數 function isChrome() { nu = navigator.userAgent; if (nu.match(/chrome/i)) { return true; } else { return false; } } topobj = document.getElementById(‘top‘); //滾動條 window.onscroll = function() { if (isChrome) { //谷歌 st = document.body.scrollTop;//body兼容谷歌 if (st > 200) { topobj.style.display = ‘block‘; } else { topobj.style.display = ‘none‘; } } else { // 非谷歌 st = document.documentElement.scrollTop;//documentElement兼容ie、火狐 if (st > 200) { topobj.style.display = ‘block‘; } else { topobj.style.display = ‘none‘; } } //點擊返回頂部 topobj.onclick = function() { if (isChrome) { //谷歌 document.body.scrollTop = 0; } else { // 非谷歌 document.documentElement.scrollTop = 0; } } } </script> </body> </html>
效果圖：
另外附件：sublime打1-100數字快捷方式：h1{$$$$$}*100
原生態js，返回至頂部