首页 > 代码库 > jquery返回顶部特效

jquery返回顶部特效

 

<style>    p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; }    p#back-to-top a{ text-align:center;  text-decoration:none;  color:#d1d1d1;  display:block;  width:30px;        /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/        transition:color 1s; -moz-transition:color 1s;        -webkit-transition:color 1s;        -o-transition:color 1s;}    p#back-to-top a span{        background:url(images/ico.jpg) no-repeat; display:block;height:30px;  width:30px;margin-bottom:5px;        /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/        transition:background 1s;  -moz-transition:background 1s;-webkit-transition:background 1s;-o-transition:background 1s;}</style>

 

 1 <div style="width: 100%; height: 3000px;"></div> 2 <p id="back-to-top"><a href="http://www.mamicode.com/#top"><span></span>返回顶部</a></p> 3  4 <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.9.1.min.js"></script> 5 <script> 6     $(function(){ 7         $(window).scroll(function(){ 8             if($(window).scrollTop()>=100){ 9                 $("#back-to-top").fadeIn(1500); //缓慢的将段落淡入10             }11             else{12                 $("#back-to-top").fadeOut(1500); //缓慢的将段落淡出13             }14         })15         $("#back-to-top").click(function(){16            $(‘body.html‘).animate({scrollTop},1000);17            return false;18        })19     })20 </script>

 

jquery返回顶部特效