<div style="height:3000px; background:gray;"> clientHeight:内容可视区域的高度,与页面内容无关<br/><br/> offsetHeight: IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。 NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。<br/><br/> scrollHeight: IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。 NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。<br/><br/> </div> <div id="updown"> <span class="up"></span> <span class="down"></span> </div>
<style type="text/css"> <!-- *{padding:0; margin:0} #updown{ _top: expression(eval((document.compatMode&&document.compatMode=="CSS1Compat")? documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-1: document.body.scrollTop+document.body.clientHeight-this.clientHeight-1)); position: fixed; _position: absolute; top: 200px; right: 30px; display: none; } #updown span{ cursor:pointer; width:48px; height:48px; display:block; } #updown .up{ background:url(updown.png) no-repeat; } #updown .up:hover{ background:url(updown.png) top right no-repeat; } #updown .down{ background:url(updown.png) bottom left no-repeat; } #updown .down:hover{ background:url(updown.png) bottom right no-repeat; } </style>
<script type="text/javascript" src="http://aqjs.ciwong.com/Content/js/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#updown").css("top",window.screen.availHeight/2-100+"px");//属性声明了显示浏览器的屏幕的可用高度 $(window).scroll(function() { if($(window).scrollTop() >= 100){ $(‘#updown‘).fadeIn(300); }else{ $(‘#updown‘).fadeOut(300); } }); $(‘#updown .up‘).click(function(){ $(‘html,body‘).animate({scrollTop: ‘0px‘}, 800); }); $(‘#updown .down‘).click(function(){ $(‘html,body‘).animate({scrollTop: document.body.clientHeight+‘px‘}, 800);//内容可视区域的高度,与页面内容无关 }); }); </script>
图片下载:
时间: 2024-10-09 04:11:10