<!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. bzoj1115: [POI2009]石子游戏Kam

    Description 有N堆石子,除了第一堆外,每堆石子个数都不少于前一堆的石子个数.两人轮流操作每次操作可以从一堆石子中移走任意多石子,但是要保证操作后仍然满足初始时的条件谁没有石子可移时输掉游戏 ...

  2. codevs 1243 网络提速

    题目描述 Description 某学校的校园网由n(1<=n<=50)台计算机组成,计算机之间由网线相连,如图5.其中顶点代表计算机,边代表网线.正如你所见,不同网线的传输能力不尽相同, ...

  3. java的类加载机制

    1．概述 Class文件由类装载器装载后,在JVM中将形成一份描述Class结构的元信息对象,通过该元信息对象可以获知Class的结构信息:如构造函数,属性和方法等,Java允许用户借由这个Class ...

  4. CentOS 6用snmp配合MRTG显示系统状态

    1. 软件安装以yum的方式安装snmp/MRTG 安装SNMP(要记得安装net-snmp-utils,不然snmpwalk将不能使用)yum -y install net-snmp* 安装MRTG ...

  5. 用extern关键字使程序更加清晰

    一.基础研究 之前基于tcc.tlink实现一个新的编译连接工具cc.exe,用到的文件有cs.lib.c0s.obj.main.obj,其中main.obj是我们自己加入的文件,它可以实现开始显示彩 ...

  6. 不用预计算切向空间的Normal mapping

    先贴出shader 吧 等有时间了 来阐述原理 // vertex shader //varying vec3 ViewPosition; //varying vec3 Normal; varying ...

  7. windows客户端连接到samba服务器(如何使用samba)

    首先确保你的服务端已经配置好samba并成功启动服务,方法可参考此文章http://blog.csdn.net/linglongwunv/archive/2010/01/19/5212875.aspx ...

  8. 编写SQL

    create table student ( sno char(9) primary key, sname char(20) unique, ssex char(2), sage smallint, ...

  9. pip常用命令

    以flask为例. 1. 安装 # pip install flask 安装 flask. # pip install flask==1.0 安装 1.0版本的flask # pip install ...

  10. GMU

    NEXT | 不错过任何一个新产品 百度开源 Mobile UI 组件库,提供 Web app.Pad 端简单易用的 UI 组件 发表评论