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

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

一、简述

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

二、效果

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

三、代码

	
		 
		 
		
		
		
		
		
	
	
	
		
回到顶部 测试例子
		

			

				
回到
顶部
				
回到
顶部
				
回到
顶部
			
		
	
	

四、总结

       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浮动位置

        

          上面的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;
}

     效果：