<!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回网页顶部的更多相关文章

  1. JS网页顶部弹出可关闭广告图层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js常用返回网页顶部几种方法

    一.使用锚标记 此方法最简单,只需在body下放个隐藏的锚点标记,内容如下:  代码如下 复制代码 <a name="top" id="top">& ...

  3. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. &#65279导致网页顶部空白一行的解决办法【实测有效】

    我用织梦做的网站,出现了&#65279导致网页顶部空白一行的问题.通过搜索,了解到这原来是UTF-8的BOM的问题. &#65279导致网页顶部空白一行原因 这个问题只会在chrome ...

  5. 前端 css+js实现返回顶部功能

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...

  6. js实现回到顶部功能

    js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...

  7. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

  8. #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 ...

  9. JS判断网页是否在微信中打开/

    JS判断网页是否在微信中打开,代码如下: <script type="text/javascript"> function is_weixn(){ var ua = n ...

随机推荐

  1. 【HDOJ】4884 TIANKENG's rice shop

    简单模拟,注意并不是完全按照FIFO的顺序.比如第i个人的id为k,那么就算第i+1人的id不为k,也会检查他后续的排队人是否有id为k的. #include <cstdio> #incl ...

  2. 最小费用最大流MCMF zkw费用流

    稀疏图慢死了...但是稠密图效果还是很好的 struct MCMF{ struct tedge{int x,y,cap,w,next;}adj[maxm];int ms,fch[maxn]; int ...

  3. 使用 VMAccess 扩展程序重置 Linux 虚拟机的登录凭据

    Ning KuangWSSC WS ARD高级项目经理 您是否曾经因为忘记 Azure VM 密码或 SSH密钥而导致无法访问 VM?VMAccess扩展程序使您可以重置密码.SSH密钥或 SSH ...

  4. （转载）APC支持php5.4了

    (转载)http://www.neatstudio.com/archives/?article-2061.html 时隔一年多,APC终于又更新了,这次更新最大的就是支持PHP5.4:- Add PH ...

  5. Nodejs in Visual Studio Code 01.简单介绍Nodejs

    1.开始 作者自己:开发人员,Asp.Net , html / js , restful , memcached , oracle ,windows , iis 目标读者:供自己以后回顾 2.我看No ...

  6. Visual Studio创建跨平台移动应用_01.Cordova&Xamarin

          目前开发移动应用有三种模式:Native.Hybird.Web,若要开发跨平台的移动应用,又希望与本地API交互,那么Hybird是一个非常好的选择.       作为一个.Net程序员, ...

  7. SRM 584 DIV1

    A 简单的差分约束模型 , 因为d是定值 , 所以也可以按最短路理解 , trick是不能把圈算进去. #define maxn 55 class Egalitarianism { public: i ...

  8. iOS利用Runtime自定义控制器POP手势动画

    前言 苹果在iOS 7以后给导航控制器增加了一个Pop的手势,只要手指在屏幕边缘滑动,当前的控制器的视图就会跟随你的手指移动,当用户松手后,系统会判断手指拖动出来的大小来决定是否要执行控制器的Pop操 ...

  9. springmvc对jsonp的支持

    在与前端开发人员合作过程中,经常遇到跨域名访问的问题,通常我们是通过jsonp调用方式来解决.jsop百科:http://baike.baidu.com/link?url=JKlwoETqx2uuKe ...

  10. python 2017.1.9

    python对缩进和空格要求非常严格,要求非常对齐 print时不同字符串之间会自动加上空格 while 和 if 等没有结束标记,全部通过对齐的方式表示的