<!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. libcurl 下载上传

    近来一个新的项目需要使用到http. 本来用socket来写一个的,后来发现功能实在太简单,有点捉襟见肘. 于是改用libcur来做. 首先下载libcur的源码,然后配置: ./configure ...

  2. 转：PHP - .htaccess设置显示PHP错误

    使用.htaccess可以在某种程度上更改PHP的错误显示的设置,实际上,相当于更改PHP.ini的参数,很是方便. 将以下相应代码放到对应目录中的.htaccess文件,即可实现相应功能. 关闭错误 ...

  3. Http Request Process

    Request---------------->IIS(w3wp.exe)--------------->CLR(AppDomain)-------------------->ASP ...

  4. SANS top 20

    What Are the Controls?The detailed Consensus Audit Guidelines are posted at http://www.sans.org/cag/ ...

  5. 利用Keil u4调试，精确实现软件延时

    用定时器延时,有时候显得有点麻烦,我们不如考虑软件精确延时,软件延时无非就是利用for或while多重循环.以前用到延时函数时,都是从网上下载别人写好的延时子程序.延时5ms,400ms,1s,……, ...

  6. 【HDOJ】1310 Team Rankings

    STL的应用,基本就是模拟题. /* 1410 */ #include <iostream> #include <string> #include <algorithm& ...

  7. 【HDOJ】1495 非常可乐

    bfs. #include <iostream> #include <queue> #include <cstdio> #include <cstring&g ...

  8. POJ1321 棋盘问题(dfs)

    题目链接. 分析: 用 dfs 一行一行的搜索,col记录当前列是否已经放置. AC代码如下: #include <iostream> #include <cstdio> #i ...

  9. radio 和checkbox与文字对齐问题

    今天在项目中遇到radio和文字对齐问题(ie不明显,火狐和google比较明显),在此记录. 1.浏览器默认文字大小为14px,因而当文字字体为14px时radio和checkbox与文字对齐良好, ...

  10. ASPNET登陆总结

    昨天晚上看了视频,今天早上起来就凭着记忆与视频里的代码试着做了一个登陆,基本功能是实现了. 0x0:首先,第一步是做一个界面....直接扒别人做好的页面.....各种改改路径啥的,用浏览器打开,恩,发 ...