<!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. jdbc(1)（一）

    1.连接数据库,准备mysql连接jar包导入项目: Class.forName("com.mysql.jdbc.Driver"); //建立连接是比较耗时,耗资源的,实际开发中多 ...

  2. 《FPGA零基础入门到精通视频教程》-第001b讲软件的破解

    高清视频和配套讲义这里下载 http://www.fpgaw.com/thread-68128-1-1.html 优酷视频地址,不是很清楚

  3. 利用Tree命令生成磁盘文件列表

    命令原型:D:/>tree /? 以图形显示驱动器或路径的文件夹结构.TREE [drive:][path] [/F] [/A]/F 显示每个文件夹中文件的名称./A 使用 ASCII 字符,而 ...

  4. TMethod的学习与使用

    http://bbs.2ccc.com/topic.asp?topicid=496893

  5. 14.3 InnoDB Multi-Versioning InnoDB 多版本

    14.3 InnoDB Multi-Versioning InnoDB 多版本 InnoDB 是一个多版本的存储引擎,它保持信息关于改变的数据老版本的信息, 为了支持事务功能比如并发和回滚. 这些信息 ...

  6. -_-#【React】

    React Native 用于构建用户界面的JAVASCRIPT库 | ReactReact 入门实例教程颠覆式前端UI开发框架:Reactzhihu1zhihu2 React.js编程思想 < ...

  7. 【转】Android进阶2之Activity之间数据交流（onActivityResult的用法）----不错

    原文网址:http://blog.csdn.net/sjf0115/article/details/7387467 主要功能: 在一个主界面(主Activity)上能连接往许多不同子功能模块(子Act ...

  8. C# 多线程经典示例 吃苹果

    本文主要讲述了多线程开发中经典示例,通过本示例,可以加深对多线程的理解. 示例概述: 下面用一个模拟吃苹果的实例,说明C#中多线程的实现方法.要求开发一个程序实现如下情况:一个家庭有三个孩子,爸爸妈妈 ...

  9. bzoj3890 [Usaco2015 Jan]Meeting Time

    Description Bessie and her sister Elsie want to travel from the barn to their favorite field, such t ...

  10. cppunit学习笔记

    下载cppunit 链接:http://www.cnblogs.com/duxiuxing/p/4303809.html cppunit官方文档浅析 链接:http://www.cnblogs.com ...