原生态js,返回至顶部
JS 返回 顶部
2023-09-14 08:58:23 时间
<!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
相关文章
- Fabric.js 使用纯色遮挡画布(前景色)
- Js排序算法_js 排序算法
- 使用 React 和 ethers.js 构建DApp
- JS获取当前年份_js获取当前时间年月日
- JS设置定时器_js设置定时器
- 80%的前端开发都答不上来的js异步面试题
- Touch 移动设备上的 手势识别 与 Js事件库
- ab77b6ea7f3fbf79.JS代码报错什么原因?
- js实现返回页面顶部功能详解编程语言
- JS动态引入js、CSS动态创建script/link/style标签详解编程语言
- nodejs使用Node.js优雅地整合MongoDB(mongodb整合)
- 使用Oracle和JS开发新一代应用仿真世界(oracle js)
- [js]轻便的XMLHttpRequest应用函数:downloadUrl()
- JscallBack返回前一页的js方法
- js方法实现返回多个数据的代码
- IE6下js通过css隐藏select的一个bug
- js对象之JS入门之Array对象操作小结
- js正则表达式之$1$2$3$4$5$6$7$8$9属性,返回子匹配的结果
- 纯js网页画板(Graphics)类简介及实现代码
- JSON序列化与解析原生JS方法且IE6和chrome测试通过
- js螺旋动画效果的具体实例
- js中Image对象以及对其预加载处理示例
- JSP加载JS文件不起作用的有效解决方法
- javascript写的异步加载js文件函数(支持数组传参)
- JS在指定数组中随机取出N个不重复的数据
- JavaScript学习笔记之JS事件对象
- JS来动态的修改url实现对url的增删查改