$(window).scrollTop(); 滚动条距顶部距离(页面超出窗口的高度)
$(document).scrollTop(); 滚动条到顶部的垂直高度
$(document).height() 页面的文档高度
$(window).height() 窗口的高度
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>高度</title> <script src="http://files.cnblogs.com/tinyphp/jquery-1.3.2.min.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> $(function(){ $(window).scroll(function(){ console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop()); console.log("页面的文档高度 :"+$(document).height()); console.log(‘窗口的高度:‘+$(window).height()); console.log(‘滚动条距顶部距离(页面超出窗口的高度)‘+$(window).scrollTop()); console.log(‘----------------------------------‘); }) }) </script> <div class="box" style="height:800px; background:red"></div> </body> </html>
原文:http://www.cnblogs.com/tinyphp/p/3736399.html