原生态js，返回至顶部
<!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，返回至顶部的更多相关文章
- js返回页面顶部
第一次写博客,不太专业,废话不多说,直接上自己早上做的东东.有不足之处,希望指点. css: body{counter-reset: p;} p{width: 100px;margin: 20px 0 ...
- js返回顶部封装 简洁
js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...
- HTML5商城开发五 实现返回页面顶部
本文内容主要是网上参考收集,介绍四种简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用Javascript Scroll函数动态返回等等. 一.使用锚标记返回页面顶部 使用HTML锚标记最 ...
- js原生回到顶部
<!DOCTYPE html><html><head> <meta content="测试demo" name="Keyword ...
- 代码： 返回页面顶部 jquery
jquery代码: 返回页面顶部 <script type="text/javascript" src="http://cdn.bootcss.com/jquery ...
- js实现回到顶部功能
js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...
- jquery返回滚动条顶部
var $view = $('html,body'),$backTop = $('#backTop'), $backTop.on('click',function(){ $view.animate({ ...
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 返回上一页
--------2016-6-14 16:37:30-- source:[1]js返回上一页
随机推荐
- 整合多个py文件接口的unittest。suite执行方法
1.每个接口用例为一个.py文件.内容如下: getAdMakeMoneyList文件: # coding=utf-8import xlrdimport requestsimport unittest ...
- Python中常用模块一
random模块 import random # 应用数学计算 print(random.random()) # 取随机小数 范围是 0-1之间 # 应用抽奖 , 彩票 print(random.ra ...
- oracle误删数据的解决方法
之前不小心误删了一条数据,索性我还记得id,通过select * from 表名 as of timestamp to_timestamp('2017-6-23 9:10:00','yyyy-mm-d ...
- PHP数据结构之一：PHP数据结构基本概念—数据结构
学习任何一种技术都应该先清楚它的基本概念,这是学习任何知识的起点!本文是讲述数据结构的基本概念,适合对数据结构已经有一定基础的程序员,更是适合想要学习数据结构的code一族!让我们开始PHP数据结构的 ...
- canvas二进制字符下落
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 3 ...
- 201671010127 2016—2017-2 通过一个小程序对Java的再认识。
学习了将近四周的Java语言,对于Java语言,我也有了更进一步的理解,出于对Java语言的喜爱,我总是喜欢没事的时候,自己敲一些很简单的代码,一边学习Java语言,一边对比C语言,往往可以帮助我们更 ...
- Linux修复MBR扇区故障
给虚拟机增加一块硬盘,用于备份mbr的信息 fdisk -l 查看硬盘系统是否认识 fdisk /dev/sdb 进行分区 fdisk -l 查看分区是否出来 mkfs -t ext4 /dev/sb ...
- 686. Repeated String Match 字符串重复后的子字符串查找
［抄题］: Given two strings A and B, find the minimum number of times A has to be repeated such that B i ...
- OpenCV 2.4.13 installed in Ubuntu 14 and CMakeLists Demo
1. 配置编译器环境 [compiler] sudo apt-get install build-essential 2. 安装OpenCV的依赖包 [required] -dev pkg-confi ...
- 997D Cycles in product
传送门 题目大意 https://www.luogu.org/problemnew/show/CF997D 分析 我们发现两棵树互不相关 于是我们可以分别求出两棵树的信息 我们点分,人啊按后设f[i] ...