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代码 即可使用,拿走不谢,哈哈哈

 结果展示:

posted @ 2018-08-17 15:46  迷途纸鸢  阅读(514)  评论(0编辑  收藏  举报