网页返回头部

高军威

浏览: 182007 次
性别:
来自: 北京

最近访客更多访客>>

caorucan

coreycool

zswzhj

fuanyu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javaScript

js javascript backtop 返回顶部

网上各种各样的眼花缭乱，索性自己写一个，这只是个简单的例子，
点击返回头部瞬间跳到顶部，你也可以写计时器每次向上滚动多少，实现有动画效果的
返回顶部

兼容性也不错，主流浏览器都是可用的

先上图：

JS部分

//返回顶部
	var scrolltotop = {
		scrollevent:function(){
			try{
				var OsObject = this.whichbrowser();
				var show_jq_k = document.body.scrollTop;
				var show_jq_g = document.body.scrollLeft;
				var cuizhi = document.documentElement.scrollTop;
			}catch(e){}
			//判断浏览器类型 
			if(OsObject=="Firefox" || OsObject=="MSIE"){
				//隐藏返回头部按钮
				if(cuizhi < 150){
					document.getElementById("totop_btn").style.display = "none";
				}
				//显示返回头部按钮
				if(cuizhi > 150){
					document.getElementById("totop_btn").style.display = "inline";
				}
			}else{
				console.log(show_jq_k)
				//隐藏返回头部按钮
				if(show_jq_k < 150){
					document.getElementById("totop_btn").style.display = "none";
				}
				//显示返回头部按钮
				if(show_jq_k > 150){
					document.getElementById("totop_btn").style.display = "inline";
				}
			}
		},
		whichbrowser:function(){
			if(navigator.userAgent.indexOf("MSIE")>0) {
				OsObject = "MSIE";
				return OsObject;  
			}
			if(isChrome=navigator.userAgent.indexOf("Chrome")>0) {
				OsObject = "Chrome";
				return OsObject;  
			}			
			if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
				OsObject = "Firefox";
				return OsObject;
			}  
			if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
				OsObject = "Safari";
				return OsObject;
			}   
			if(isCamino=navigator.userAgent.indexOf("Camino")>0){
				OsObject = "Camino";
				return OsObject;
			}  
			if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
				OsObject = "Gecko";
				return OsObject;
			}
		},
		scrolltop:function(){
			//window.scrollTo(0,0); 
			//把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
			window.scrollBy(0,-100);
			//延时递归调用，模拟滚动向上效果
			scrolldelay = setTimeout('scrolltotop.scrolltop()',50);
			//获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值
			var sTop=document.documentElement.scrollTop+document.body.scrollTop;
			//判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
			if(sTop==0) clearTimeout(scrolldelay);
		}
	}
	window.onscroll = function(){
		scrolltotop.scrollevent();
	}

HTML部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>测试</title>
	<script type="text/javascript" src="scrolltotop.js"></script>
</head>
<body id="top">
	<div style="height:300px;width:100%;"></div>
	<div style="height:300px;width:100%;background-color:#dddddd;"></div>
	<div style="height:300px;width:100%;background-color:#ffffff;"></div>
	<div style="height:300px;width:100%;background-color:#00ff00;"></div>
	<div style="height:300px;width:100%;background-color:#ffddee;"></div>
	<div style="height:300px;width:100%;background-color:#eeff00;"></div>
	<div style="height:300px;width:100%;background-color:#ddeeff;"></div>
	<a id="totop_btn" href="javascript:;" onclick="scrolltotop.scrolltop()" target="_self" class="totop" 
		style="position:fixed;right:10px; bottom:10px;width:100px;height50px;line-height:50px;text-align:center;background-color: #ff0000;display:none;">
		返回顶部
	</a>
</body>	
</html>

分享到：

解决PKIX：unable to find valid certifi ... | java自带线程池和队列详细讲解

2015-01-09 14:36
浏览 685
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

网页返回头部

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

网页 返回头部

评论

发表评论

相关推荐

js常用的对象扩展方法

js日期溢出

向上滚动到浏览器顶部固定住，向下滚动出浏览器顶部回复原状

一个页面多个倒计时js代码

页面复制文本信息

IE 玛德好霸道，就你特殊

js代码

得到浏览器尺寸，判断浏览器内核

Js汉字和Unicode编码互转 Unicode加密 Unicode解密

js运算bug，等等

Ajax表单提交的特殊字符处理

复选框 浏览器兼容问题解决方案

选中复选框后按钮可用，不选中不可用

CSS中的绝对定位与相对定位

Jquery 收藏本站代码

ie6和ie7下z-index bug的解决办法

【转】jsp、freemarker、velocity比较

常用js方法

图片上下无间隙滚动

JS实现文本不间断上线滚动效果【转】

最近访客更多访客>>

网页返回头部

复选框浏览器兼容问题解决方案