zoukankan      html  css  js  c++  java
  • jQuery火箭图标返回顶部代码

     1 <style>
     2 #back-top {
     3      position: fixed;
     4      top:0px;
     5      right: 0px;
     6      z-index: 2147483647;
     7 }
     8 #back-top span {
     9      width: 130px;
    10      height: 161px;
    11      display: block;
    12      background:url(http://www.igta.cc/wp-content/themes/Gzovin/images/gotop.png) no-repeat;
    13 }
    14 #back-top a{outline:none}
    15 </style>
    16 <script type="text/javascript">
    17 $(function() {
    18     // hide #back-top first
    19     $("#back-top").hide();
    20     // fade in #back-top
    21     $(window).scroll(function() {
    22         if ($(this).scrollTop() > 500) {
    23             $('#back-top').fadeIn();
    24         } else {
    25             $('#back-top').fadeOut();
    26         }
    27     });
    28     // scroll body to 0px on click
    29     $('#back-top a').click(function() {
    30         $('body,html').animate({
    31             scrollTop: 0
    32         }, 800);
    33         return false;
    34     });
    35 });
    36 </script>
    37 <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>

    如何使用:直接把源码放到 博客设置选项的页首Html代码 即可使用,拿走不谢,哈哈哈

     结果展示:

  • 相关阅读:
    git知识点总结
    自动化进阶
    unittest单元测试框架
    自动化测试模型
    webdriver
    python文件处理
    uva 11077 置换
    poj 1066 Treasure Hunt
    poj 2661 Factstone Benchmark
    hdu 4180
  • 原文地址:https://www.cnblogs.com/Trojan00/p/9493667.html
Copyright © 2011-2022 走看看