首页 > 代码库 > 返回顶部特效

返回顶部特效

 

<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>

 

图片下载:

技术分享

返回顶部特效