返回顶部特效

Posted 2020-08-06 杜Amy

 

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

 

图片下载：