点击滚动到顶部

Posted on Posted in css, js

> html

  1. <p class="link-back2top" style="display: block;"><a href="#" title="Back to top">Back to top</a></p>  

> css

  1. .link-back2top {  
  2.     bottombottom50px;  
  3.     height32px;  
  4.     positionfixed;  
  5.     width32px;  
  6.     z-index: 3;  
  7.     rightright: 50%;  
  8.     margin-right: -480px;  
  9. }  
  10.   
  11. .link-back2top a {  
  12.     backgroundurl(img/bg_top.png) no-repeat scroll 13px center #D6D6D6;  
  13.     border-radius: 32px 32px 32px 32px;  
  14.     displayblock;  
  15.     font-size: 0;  
  16.     height32px;  
  17.     line-height: 0;  
  18.     overflowhidden;  
  19.     width32px;  
  20. }  

> js

  1. <script>  
  2. $(".link-back2top").hide();  
  3. $(window).scroll(function() {  
  4.     if ($(this).scrollTop() > 100) {  
  5.         $(".link-back2top").fadeIn();  
  6.     } else {  
  7.         $(".link-back2top").fadeOut();  
  8.     }  
  9. });  
  10. $(".link-back2top a").click(function() {  
  11.     $("body,html").animate({  
  12.         scrollTop: 0  
  13.     },  
  14.     800);  
  15.     return false;  
  16. });  
  17. </script>  

> css 图片

![bg_top.png][1]

呃……图片是透明的

[1]: http://liuhonghe.me/wp-content/uploads/2016/05/57664697.png

» 转载请注明来源:若我若鱼 » 点击滚动到顶部

Leave a Reply

Your email address will not be published. Required fields are marked *

3 × 3 =