js回网页顶部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>回到顶部</title>
<style type="text/css">
html{
_overflow:hidden;
}
body{
_overflow:auto;
height:100%;
}
#div{
background:#ccc;
width:400px;
height:1500px;
text-align:center;
}
#returntop{
border:1px #ccc solid;
background:#F30;
width:80px;
height:30px;
position:fixed;
_position:absolute;
line-height:30px;
text-align:center;
top:0px;
left:0px;
display:none;
cursor:pointer;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<div id="div">这是顶部</div>
<div id="returntop">回顶部</div>
<script type="text/javascript">
var getDiv=document.getElementById('returntop');
getDiv.onclick=function(){
window.scrollTo(0,0);
}
window.onscroll=function(){
if(document.documentElement.scrollTop){
getDiv.style.display="block";
}else if(document.body.scrollTop){
getDiv.style.display="block";
}else{
getDiv.style.display="none";
}
}
function getWinSize(){
var winHeight=window.innerHeight,winWidth=window.innerWidth;
if(document.documentElement.clientHeight){
winHeight=document.documentElement.clientHeight;
winWidth=document.documentElement.clientWidth;
}else{
winHeight=document.body.clientHeight;
winWidth=document.body.clientWidth;
}
var height=winHeight-50;
var width=winWidth-100;
getDiv.style.top=height+"px";
getDiv.style.left=width+"px";
}
getWinSize();
window.onresize=getWinSize;
</script>
</body>
</html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
js回网页顶部的更多相关文章
- JS网页顶部弹出可关闭广告图层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js常用返回网页顶部几种方法
一.使用锚标记 此方法最简单,只需在body下放个隐藏的锚点标记,内容如下: 代码如下 复制代码 <a name="top" id="top">& ...
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 导致网页顶部空白一行的解决办法【实测有效】
我用织梦做的网站,出现了导致网页顶部空白一行的问题.通过搜索,了解到这原来是UTF-8的BOM的问题. 导致网页顶部空白一行原因 这个问题只会在chrome ...
- 前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...
- js实现回到顶部功能
js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)
#3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...
- #3使用html+css+js制作网页 制作登录网页
#3使用html+css+js制作网页 制作登录网页 本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...
- JS判断网页是否在微信中打开/
JS判断网页是否在微信中打开,代码如下: <script type="text/javascript"> function is_weixn(){ var ua = n ...
随机推荐
- JS对象与json字符串格式
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- bind函数
bind函数把一个本地协议地址赋予一个套接字 对于网际协议,协议地址是32位的IPv4地址或128位的IPv6与16位的TCP或UDP端口号的组合 int bind ( int sockfd, con ...
- codevs 3269 混合背包
题目描述 Description 背包体积为V ,给出N个物品,每个物品占用体积为Vi,价值为Wi,每个物品要么至多取1件,要么至多取mi件(mi > 1) , 要么数量无限 , 在所装物品总体 ...
- c构造函数
构造函数 任何一们面向对象语言里都会涉及构造函数这一概念,只是实现的方式各有差异.需要这main函数之前执行一段代码是非常容易的事情,只需要声明一对象的全局变量,在构造函数可以为所欲为干你想干的事 ...
- [转]C# FileSystemWatcher监控指定文件或目录的文件的创建、删除、改动、重命名等活动
觉得这个很常用..比如一些软件. http://www.rabbit8.cn/DoNet/407.html FileSystemWatcher控件主要功能: 监控指定文件或目录的文件的创建.删 ...
- h.264的POC计算
本文参考自http://wenku.baidu.com/link?url=ZPF0iSKzwLQg_8K02pnnd_-Zd6ISnsOGWsGYb98ucLkELZO4nOv-X-v2GKLzI3r ...
- Android应用开发学习笔记之多线程与Handler消息处理机制
作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz 和JAVA一样,Android下我们可以通过创建一个Thread对象实现多线程.Thread类有多个构造函数,一般通 ...
- 【git】git常用命令简介
使用Git也好长时间了,但一直没系统的学习过,现在总结以下工作中用到的,记录以下,以后忘记了可以来看看. 因为操作系统是Windows,所以将简单介绍一下通过git bash命令行的使用: 本文将不介 ...
- LeetCode——Remove Duplicates from Sorted Array
Given a sorted array, remove the duplicates in place such that each element appear only once and ret ...
- Python学习笔记2-flask-sqlalchemy 简单笔记
flask-sqlalchemy 简单笔记 字数 阅读 评论 喜欢 flask-sqlalchemy SQLAlchemy已经成为了python世界里面orm的标准,flask是一个轻巧的web框架, ...