首页 > 代码库 > 返回顶部特效
返回顶部特效
<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>
图片下载:
返回顶部特效
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。