<!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. 判断鼠标从哪个方向进入--jQuery

    转载自:http://sentsin.com/web/112.html $("#wrap").bind("mouseenter mouseleave",func ...

  2. 脚本两则--用于快速部署HADOOP，SPARK这些（特别是VM虚拟机模板部署出来的）。。

    感觉可能只是适合我自己的部署习惯吧,且只针对CENTOS6及以下版本,以后有时间,可能还是要改进.. 1,从VM的模块产生的虚拟机,如何快速搞定网络配置? #!/bin/bash #usage:./i ...

  3. Walls POJ 1161

    参考了大牛的博客 http://blog.csdn.net/wangjian8006/article/details/7958838 题目大意: 给出n个点,在这些点中有些点是俱乐部点,并且有m个区域 ...

  4. 【模拟】XMU 1599 斐波那契汤

    题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1599 题目大意: 给k,m,q以及f[1]...f[k],当n<m时,f[n]= ...

  5. 关于JavaScriptSerializer使用的问题

    初学C#的同学们,你们有没有这样的问题:遇到不懂的问题,就到处搜索,好不容易搜索出来答案吧,却发现缺少引用,缺少引用就添加引用吧,结果在添加中找不到!是不是很恼火? 解决办法:查看项目的目标框架,如果 ...

  6. HDOJ(HDU) 1718 Rank(水题、、、)

    Problem Description Jackson wants to know his rank in the class. The professor has posted a list of ...

  7. Android新浪微博客户端（三）——添加多个账户及认证

    原文出自:方杰|http://fangjie.info/?p=72 转载请注明出处 一．微博OAuth2.0认证 首先来说说授权过程,我这里授权是通过SDK的,先添加SDK的jar包,微博SDK的de ...

  8. JDK 和JRE的区别

    JRE:Java Runtime Environment/Java运行时环境目标用户:只需要运行Java程序的用户JRE包含了:Deployment,User Interface Toolkits,I ...

  9. 在Eclipse中新建Maven项目

    关于Maven的好的资料: Apache官网:http://maven.apache.org/ Apache Maven 入门篇 ( 上 ):http://www.oracle.com/technet ...

  10. UVALive 4957 Fake scoreboard

    题意就是有n个队伍和m个题目 给出了每个队伍解决的题目数量 每个题目也给出了被解决的次数 然后求一个方阵. N,Y表示每个队伍是否过了哪个题目. 要求字典序最小. 这题给人的第一反应就是网络流. 虽然 ...