js+css實現(xiàn)回到頂部按鈕(back to top)

    本文實例介紹了js+css實現(xiàn)回到頂部按鈕的方法，分享給大家供大家參考，具體內(nèi)容如下
    html
    <p id="back-to-top"><a href="#top"><span></span></a></p>
    css
    p#back-to-top{
      position:fixed;
      bottom:100px;
      right:80px;
    }
    p#back-to-top a{
      text-align:center;
      text-decoration:none;
      color:#d1d1d1;
      display:block;
      width:30px;
      /*使用CSS3中的transition屬性給跳轉(zhuǎn)鏈接中的文字添加漸變效果*/
      -moz-transition:color1s;
      -webkit-transition:color1s;
      -o-transition:color1s;
    }
    p#back-to-top a:hover{
      color:#979797;
    }
    p#back-to-top a span{
      background:#d1d1d1 url(../images/arrow_up.png) no-repeat center center;
      border-radius:6px;
      display:block;
      height:30px;
      width:30px;
      margin-bottom:5px;
      /*使用CSS3中的transition屬性給<span>標簽背景顏色添加漸變效果*/
      -moz-transition:background1s;
      -webkit-transition:background1s;
      -o-transition:background1s;
    }
    #back-to-top a:hover span{
      background:#979797 url(../images/arrow_up.png) no-repeat center center;
    }
    js
    <script type="text/javascript">
    $(document).ready(function(){
     //首先將#back-to-top隱藏
     $("#back-to-top").hide();
     //當(dāng)滾動條的位置處于距頂部600像素以下時，跳轉(zhuǎn)鏈接出現(xiàn)，否則消失
     $(function () {
      $(window).scroll(function(){
       if ($(window).scrollTop()>600){
        $("#back-to-top").fadeIn(500);
       }else{
        $("#back-to-top").fadeOut(500);
       }
     });
     //當(dāng)點擊跳轉(zhuǎn)鏈接后，回到頁面頂部位置
     $("#back-to-top").click(function(){
      $('body,html').animate({scrollTop:0},500);
       return false;
      });
     });
    });
    </script>
    以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。