js回网页顶部
<!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回网页顶部的更多相关文章
- JS网页顶部弹出可关闭广告图层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js常用返回网页顶部几种方法
一.使用锚标记 此方法最简单,只需在body下放个隐藏的锚点标记,内容如下: 代码如下 复制代码 <a name="top" id="top">& ...
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 导致网页顶部空白一行的解决办法【实测有效】
我用织梦做的网站,出现了导致网页顶部空白一行的问题.通过搜索,了解到这原来是UTF-8的BOM的问题. 导致网页顶部空白一行原因 这个问题只会在chrome ...
- 前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...
- js实现回到顶部功能
js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)
#3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...
- #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 ...
- JS判断网页是否在微信中打开/
JS判断网页是否在微信中打开,代码如下: <script type="text/javascript"> function is_weixn(){ var ua = n ...
随机推荐
- putty登录远程数据库Oracle
ssh username@127.0.0.1 password oracle -su plusql /nolog dbname/dbpassword sql:exit oracle:$exit ssh ...
- process launch failed : failed to get the task for process xxx
原因: 证书问题,project和targets的证书都必须是开发证书,ADHOC的证书会出现此问题. 解决方案: project和targets的证书使用开发证书. 其他: This error ...
- 转载——web前端相关资源总结
前端牛人博客:张克军.阮一峰.拔赤(李晶).拔赤(李晶)2.张鑫旭.梦想天空.阿当.泽飞.刘杰(嗷嗷).为之漫笔(李松峰).goddyzhao.hax的技术部落.周爱民.随网之舞.子鼠.司徒正美.ju ...
- UOJ 217 奇怪的线段树
http://uoj.ac/problem/217 题意就不X了,思路在这: 居然一开始把sap里面的mn设置为inf了,我是傻逼.. #include<cstdio> #include& ...
- 转:Yii实战中8个必备常用的扩展,模块和widget
转载自:http://www.yiiframework.com/wiki/180/yii8/ 在经过畅K网的实战后,总结一下在Yii的项目中会经常用到的组件和一些基本的使用方法,分享给大家,同时也给自 ...
- treap修订
#include<cstdio> #include<cmath> #include<algorithm> #include<ctime> #includ ...
- 【递归】Vijos P1132 求二叉树的先序序列（NOIP2001普及组第三题）
题目链接: https://vijos.org/p/1132 题目大意: 给定二叉树的中序和后序遍历,求该二叉树先序遍历. 题目思路: [递归] 这题妥妥递归. 二叉树先序根左右,中序左根右,后序左右 ...
- libvirt hypervisors信息采集
libvirt采集hypervisors信息的通用格式 driver[+transport]://[username@][hostname][:port]/[path][?extraparameter ...
- <a>标签的href属性
<a> 标签的 href 属性用于指定超链接目标的 URL. 语法 <a href="value"> 属性值 值 描述 URL 超链接的 URL.可能的值: ...
- Java-装饰模式(转)
装饰模式 在阎宏博士的<JAVA与模式>一书中开头是这样描述装饰(Decorator)模式的: 装饰模式又名包装(Wrapper)模式.装饰模式以对客户端透明的方式扩展对象的功能,是继承关 ...