`

案例--返回顶部的处理方式

 
阅读更多
现在各大网站都能看到有返回顶部的快捷处理，下面就简单看看用css和jquery如何实现吧： 

<html style="height:1000px">  
  <head>  
    <style type="text/css">  
    #totop a {   
      display: block;   
      width: 50px;   
      height: 50px;   
      overflow: hidden;   
      background-color: red;  
    }  
    #totop {   
      position: fixed;   
      bottom: 50px;   
      right: 15px;   
      cursor: pointer;   
      z-index: 999999;   
      display: block;   
      opacity: 1;  
    }      
    div ul{ 
      height:60px; 
      width: 120px;   
      border:1px solid blue;  
    }  
    div ul li{  
      height:60px;
      width: 40px;  
      list-style: none;  
      float:left;  
    }  
    </style>  
  </head>  
  <body>  
    <div>  
      <ul>  
        <li>111</li>  
        <li>222</li>  
        <li>333</li>  
      </ul>  
    </div>  
    <p>this is some text.this is some text.this is some text.this is some text.</p>      
    <div id="totop">
      <a title="返回顶部">返回顶部</a>   
    </div>  
        <script type="text/javascript" src="jquery-1.9.1.js"></script>  
        <script type="text/javascript">  
        $(function(){  
          var upperLimit=80;  
          var scrollElem=$("#totop");  
          var scrollSpeed=500;  
          scrollElem.hide();     
          $(window).scroll(function(){  
           var scrollTop=$(document).scrollTop();  
            if (scrollTop>upperLimit){  
                scrollElem.stop().fadeTo(300,1);  
             }else{  
                scrollElem.stop().fadeTo(300,0);  
             }  
          });  
          scrollElem.click(function(){  
             $('html,body').animate({scrollTop:0},scrollSpeed);
             return false;  
          });  
        });  
        </script>  
  </body>  
</html>
分享到：
| css属性-opacity
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics