用jQuery实现渐隐渐显的返回顶部效果(附多图)

先来看几个图片效果:

用jQuery实现渐隐渐显的返回顶部效果(附多图)用jQuery实现渐隐渐显的返回顶部效果(附多图)用jQuery实现渐隐渐显的返回顶部效果(附多图)用jQuery实现渐隐渐显的返回顶部效果(附多图)用jQuery实现渐隐渐显的返回顶部效果(附多图)用jQuery实现渐隐渐显的返回顶部效果(附多图)

提供几个样式图片:

用jQuery实现渐隐渐显的返回顶部效果(附多图)用jQuery实现渐隐渐显的返回顶部效果(附多图)用jQuery实现渐隐渐显的返回顶部效果(附多图)用jQuery实现渐隐渐显的返回顶部效果(附多图)用jQuery实现渐隐渐显的返回顶部效果(附多图)用jQuery实现渐隐渐显的返回顶部效果(附多图)用jQuery实现渐隐渐显的返回顶部效果(附多图)

样式图片都可以自己随便修改了

样式css:

<style type="text/css">



    body,p,a,div{



        margin:0px;



        padding:0px;



    }



    body{



        font:14px/22px Georgia serif;



        margin:0 auto;



        width:640px;



    }



    h1{



        font: bold 80%/120% Arial, Helvetica, sans-serif;



        text-transform: uppercase;



        margin: 0 0 10px;



        color: #999;



    }



    h2{



        font-size: 22px;



        margin: 0 0 8px;



    }



    h3{



        font-size: 1.6em;



        margin: 20px 0 5px;



    }



    a{



        color: #333;



        text-decoration: none;



    }



    a:hover{



        color: #548B02;



    }



    p{



        margin-bottom:25px;



    }



    #back-to-top{



        position:fixed;



        bottom:100px;



        left:60px;



    }



    #back-to-top a{



        text-align:center;



        text-decoration:none;



        color:#d1d1d1;



        display:block;



        width:80px;



        /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/



        -moz-transition:color 1s; 



        -webkit-transition:color 1s;



        -o-transition:color 1s;



    }



    #back-to-top a:hover{



        color:#979797;



    }



    #back-to-top a span{



        background:#d1d1d1;



        border-radius:6px;



        display:block;



        height:80px;



        width:80px;



        background:#d1d1d1 url(images/arrow_up1.png) no-repeat center center;



    /*这是图片链接地址1*/        margin-bottom:5px;



        -moz-transition:background 1s;



        -webkit-transition:background 1s;



        -o-transition:background 1s;



    }



    #back-to-top a:hover span{



        background:#979797 url(images/arrow_up1.png) no-repeat center center;

    /*这是图片链接地址1*/ 
   } </style>


Jquery代码:

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>//这里引入你自己的jq或者用这个在线jq



  <script type="text/javascript">

      $(document).ready(function () {

          //首先将#back-to-top隐藏

          $("#back-to-top").hide();

          //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失

          $(function () {

              $(window).scroll(function () {

                  if ($(window).scrollTop() > 100) {

                      $("#back-to-top").fadeIn(1500);

                  }

                  else {

                      $("#back-to-top").fadeOut(1000);

                  }

              });

              //当点击跳转链接后,回到页面顶部位置

              $("#back-to-top").click(function () {

                  $('body,html').animate({ scrollTop: 0 }, 1000);

                  return false;

              });

          });

      });



  </script>

html:

 

<body id="top">



    <p id="back-to-top"><a href="#top"><span></span>回到顶部</a></p>

这里面放文章的内容就好了
</body>

文章内容自己添加

 

你可能感兴趣的:(jquery)