jQuery兼容IE和Chrom浏览器-得到页面滚动条的坐标值

我们先来看一下代码:

  
    
    My JSP 'practice_02.jsp' starting page
	
	
	    
	
	
	
	
		.all {
			width:100%;
			height:120%;
		}
		.scroll {
			width:200px;
			height:100px;
			overflow: scroll;
		}
	
  
  
  	
	 	
		  	this is niuniu love
		  	this is niuniu love
		  	this is niuniu love
		  	this is niuniu love
		  	this is niuniu love
		  	this is niuniu love
		  	this is niuniu love
		  	this is niuniu love
	 	
	 	
	 	得到scrollTop的坐标
	 	设置scrollTop的坐标
  	
  	
	
		$('#btn1').click(function() {
			console.log('以下是滚动条的位置');
			console.log($('html').scrollTop());
		});
	
  

当我们使用Chrome浏览器滚动浏览器的滚动条时发现是每次取的值都是0，如下:

没有滚动的时候 滚动之后

但是在IE浏览器就可以取到值

所以我们将代码做一下修改，修改部分如下:

		$('#btn1').click(function() {
			console.log('以下是滚动条的位置');
			console.log($('body').scrollTop());
		});

我们发现Chrome浏览器可以取到值了 经过小编测试部分版本的IE浏览器的值为0

所以我们看最终的代码:

  
    
    
    My JSP 'practice_02.jsp' starting page
    
	
	
	    
	
	
	
	
		.all {
			width:100%;
			height:120%;
		}
		.scroll {
			width:200px;
			height:100px;
			overflow: scroll;
			
		}
	
  
  
  	
	 	
		  	this is niuniu love
		  	this is niuniu love
		  	this is niuniu love
		  	this is niuniu love
		  	this is niuniu love
		  	this is niuniu love
		  	this is niuniu love
		  	this is niuniu love
	 	
	 	
	 	得到scrollTop的坐标
	 	设置scrollTop的坐标
  	
  	
	
		$('#btn1').click(function() {
			console.log('以下是滚动条的位置');
			console.log($('body').scrollTop()+$('html').scrollTop());
		});