Web css+js实现返回顶部例子

最新推荐文章于 2022-07-13 10:29:38 发布

Genven_Liang

最新推荐文章于 2022-07-13 10:29:38 发布

阅读量451

点赞数

分类专栏： Web 文章标签： Web css+js实现返回顶部例子

学习笔记

本文链接：https://blog.csdn.net/nanfeibuyi/article/details/103701188

版权

Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Web css+js实现返回顶部例子

一、简述

记--使用css+js实现返回顶部的例子，兼容IE6浏览器。

二、效果

左边是谷歌浏览器的测试效果，右边是IETester模拟的IE6浏览器。方式1是直接回到顶部，方式2和方式3是使用定时器将滚动条慢慢滚动到顶部。不同点在于方式2使用setInterval(),方式3使用setTimeout();

三、代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8"> <!-- 设置字符集(编码)-->
		<title>js实现回到顶部例子</title> <!--页面标题-->
		
		<style type="text/css">
			li{
				list-style:none; /*去掉小圆点*/
				text-decoration:none;/*去掉下划线*/
				padding:3px;
				margin-bottom:5px;
				border:2px solid #00677C;
				_position:absolute;
				_right:10px;
			}	
			
			#rightBox{
				position:fixed;
				top:60%;
				right:12px;
				float:right;				
				display:none;
			}	
			
			/*a标签样式 默认样式, 点击之后的样式, 鼠标悬停在上面时的样式, 点击时的样式*/
			a:link{text-decoration:none;color:black}
			a:visited{text-decoration:none;} 
			a:hover{text-decoration:none;color:#56d471;}
			a:active{text-decoration:none;} 
			
			
			/* 兼容IE6 */
			#backTop1{
				cursor:pointer;	
				_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)-210));
			}
			
			#backTop2{
				cursor:pointer;	
				_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)-145));
			}
			
			#backTop3{
				cursor:pointer;
				_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)-80));
			}
			
			/* 解决IE6闪烁现象*/
			*html{
				background-image:url(about:blank);
				background-attachment:fixed;
			}
		</style>
		
		<script type="text/javascript">
			var timer;
			function go2Top1(){
				timer = setInterval(function () {
					var scrollTop = document.documentElement.scrollTop | document.body.scrollTop; <!--获取当前跟滚动条的位置(最上面的边)-->
					document.documentElement.scrollTop = document.body.scrollTop = scrollTop - scrollTop/3 - 20; <!-- 设置滚动条位置-->					
					scrollTop = document.documentElement.scrollTop | document.body.scrollTop;
					if(scrollTop <= 0) <!--滚动条到达最顶部时，清除定时器;  这里会多执行一次因为重新设置滚动条位置之后没有更新scrollTop-->
					{
						clearTimeout(timer);
					}
				}, 100); <!-- 每100毫秒执行一次-->
			}
			
			function go2Top2(){
				var scrollTop = document.documentElement.scrollTop | document.body.scrollTop; <!--获取当前跟滚动条的位置(最上面的边)-->
				window.scrollBy(0, -(scrollTop/3+20));//滚动条向上滚scrollTop/3+10
				timer = setTimeout('go2Top2()', 100); <!-- 每100毫秒执行一次go2Top2() -->
				if(scrollTop <= 0)<!-- 滚动条到达最顶部时，清除定时器; 这里会多执行一次因为重新设置滚动条位置之后没有更新scrollTop-->
				{
					clearTimeout(timer);
				}
			}

			
			window.onload = function(){ <!-- 页面加载时-->	
				var rightBox = document.getElementById("rightBox");
				var backTop2 = document.getElementById("backTop2");
				var backTop3 = document.getElementById("backTop3");
				backTop2.onclick = go2Top1;
				backTop3.onclick = go2Top2; <!-- 设置backtop3的点击事件为go2Top2-->
				window.onscroll = function(){ <!-- 当滚动条滚动时-->					
					var viewHeight = document.documentElement.clientHeight; <!--获取可视高度-->
					var scrollTop = document.documentElement.scrollTop | document.body.scrollTop; <!--获取当前跟滚动条的位置(最上面的边)-->
					<!-- console.log("viewHeight:"+viewHeight+" scrollTop:"+scrollTop); --> <!-- 打印到控制台-->
					if(scrollTop > viewHeight/2) <!-- 当滚动超过半屏就显示"回到顶部"-->
					{
						rightBox.style.display = "block"; <!-- 显示"回到顶部"-->
					}
					else
					{
						rightBox.style.display = "none"; <!-- 不显示"回到顶部"-->
					}
				}
			}
		</script>
		
	</head>
	
	<body>
		<div style='height:2000px;border:1px solid #0000FF;text-align:center;'>回到顶部 测试例子</div>
		<div id='rightBox'>
			<ul>
				<li id='backTop1' title='点击返回顶部方式1'><a href='javascript:scroll(0,0)'>回到</br>顶部</a></li>
				<li id='backTop2' title='点击返回顶部方式2'>回到</br>顶部</li>
				<li id='backTop3' title='点击返回顶部方式3'>回到</br>顶部</li>
			</ul>
		</div>
	</body>
	
</html>

四、总结

4.1 鼠标滚动事件

在页面加载事件中进行绑定相关动作。有些js操作元素前提是html元素已经存在，所以通常js操作是在页面加载时或加载之后。

window.onload = function()
{
    //编写js语句
}

滚动条滚动事件

window.onscroll = function()
{
    //编写js语句
}

4.2 滚动条回到顶部

方式1: javascript:scroll(0,0)

方式2:document.documentElement.scrollTop = 0；document.body.scrollTop = 0; //这里为了兼容性，设置了两个属性

4.3 定时器

var timer = setTimeout('go2Top()', 100); <!-- 每100毫秒执行一次go2Top() -->
或 var timer = setInterval('go2Top()', 100); <!-- 每100毫秒执行一次go2Top() -->

clearTimeout(timer); <!--清除定时器-->

4.4 DIV浮动位置

上面的position:fixed;和top:60%;属性设置在IE6浏览器不起作用, 固定在右下角了。

因此使用以下设置，将div位置跟随滚动态进行调整，如跟滚动条往下滚动10px，div也往下移10px。

( IE6 能识别_ 符号，以区分其他浏览器）

_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)-80));*/

但是div还有闪烁现象：

解决方式：添加以下设置 (IE6能解析 * html)

*html{
	background-image:url(about:blank);
	background-attachment:fixed;
}

效果：

Genven_Liang

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录