首页 > 代码库 > 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返回顶部特效
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。