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 ...
随机推荐
- Razor 语法
Razor 语法 原文:Razor Syntax Reference作者:Taylor Mullen.Rick Anderson翻译:刘怡(AlexLEWIS)校对:何镇汐 什么是 Razor? ...
- 在centos集成服务器上安装imap扩展
yum install libc-client-devel.x86_64(如果不行就yum install libc-client-devel)ln -s /usr/lib64/libc-client ...
- Retrofit2.0+OkHttp设置统一的请求头(request headers)
有时候要求Retrofit2的接口中每个都要增加上headers,又不想做重复的事情,可以使用这种方法来为每个request请求都设置上相同的请求头header. 修改请求头request heade ...
- Nginx 基本配置和日志分析
最近在维护的一个项目,路由转发规则都统一通过Nginx转发,所以再次参考部分博文和书本,熟悉Nginx的基本配置,还有一个重点也是日志的分析 Nginx 常用模块是server块,location块. ...
- 【转】Unable to execute dex: Java heap space 解决方案（如何为eclipse.int 添加内存）
原文网址:http://blog.csdn.net/zengyangtech/article/details/7003379 欢迎转载,转载请注明 http://blog.csdn.net/zengy ...
- 飘窗代码修改了一段js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- @Query注解的用法(Spring Data JPA)
参考文章:http://www.tuicool.com/articles/jQJBNv 1. 一个使用@Query注解的简单例子 @Query(value = "select name,au ...
- iOS键盘覆盖输入框的处理.doc
在一个多项输入界面上,会有多个UITextfield类型的输入框.为了滚动方面,我们会将他们一一添加到UITableView的cell中,从而组成一个可以上下滑动的数据输入界面. 但是字符输入是通过系 ...
- Injecting and Binding Objects to Spring MVC Controllers--转
I have written two previous posts on how to inject custom, non Spring specific objects into the requ ...
- Example of how to use both JDK 7 and JDK 8 in one build.--reference
JDK 8 Released Most of us won’t be able to use/deploy JDK 8 in production for a looong time. But tha ...