zoukankan      html  css  js  c++  java
  • 返回顶部特效

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

    图片下载:

  • 相关阅读:
    转:浅谈图片服务器的架构演进
    转:Spring AOP详解
    转:Spring AOP 注解方式实现的一些“坑”
    spring AOP自定义注解方式实现日志管理
    spring的普通类中如何取session和request对像
    spring session
    转:通过Spring Session实现新一代的Session管理
    转:一个Restful Api的访问控制方法(简单版)
    Python : 什么是*args和**kwargs[转载]
    tornado项目注意点
  • 原文地址:https://www.cnblogs.com/amy-1205/p/5841185.html
Copyright © 2011-2022 走看看