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

深碍√TFBOYSˉ_ 2023-06-25 03:29 10阅读 0赞

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

**一、简述**

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

**二、效果**

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

![20191225174305327.gif][]

**三、代码**

<!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) 
    					{
    						clearTimeout(timer);
    					}
    				}, 100); 
    			}
    			
    			function go2Top2(){
    				var scrollTop = document.documentElement.scrollTop | document.body.scrollTop; 
    				window.scrollBy(0, -(scrollTop/3+20));//滚动条向上滚scrollTop/3+10
    				timer = setTimeout('go2Top2()', 100); 
    				if(scrollTop <= 0)
    				{
    					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; 
    				window.onscroll = function(){ 					
    					var viewHeight = document.documentElement.clientHeight; 
    					var scrollTop = document.documentElement.scrollTop | document.body.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); 
    或 var timer = setInterval('go2Top()', 100); 
    
    clearTimeout(timer);

4.4 DIV浮动位置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70][]

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

![20191225171400747.gif][]

因此使用以下设置，将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还有闪烁现象：

![20191225173433673.gif][]

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

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

效果：

![20191225173243923.gif][]

[20191225174305327.gif]: https://img-blog.csdnimg.cn/20191225174305327.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191225170143139.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk=,size_16,color_FFFFFF,t_70
[20191225171400747.gif]: https://img-blog.csdnimg.cn/20191225171400747.gif
[20191225173433673.gif]: https://img-blog.csdnimg.cn/20191225173433673.gif
[20191225173243923.gif]: https://img-blog.csdnimg.cn/20191225173243923.gif