码迷,mamicode.com
首页 > Web开发 > 详细

jquery返回顶部特效

时间:2016-09-05 10:27:08      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:

 

<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="#top"><span></span>返回顶部</a></p>
 3 
 4 <script type="text/javascript" src="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返回顶部特效

标签:

原文地址:http://www.cnblogs.com/amy-1205/p/5841255.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!