jquery實(shí)現(xiàn)頁(yè)面常用的返回頂部效果

更新時(shí)間：2016年03月04日 10:05:01 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)頁(yè)面常用的返回頂部效果代碼，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jquery實(shí)現(xiàn)返回頂部效果的全部代碼，供大家參考，具體內(nèi)容如下

效果圖：

實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>返回頂部</title>
  <style type="text/css">
     *{
       margin: 0;
       padding: 0;
     }
     .wrap{
       height: 2000px;
     }
     .gotop{
       display: block;
       width: 32px;
       height: 32px;
       background-color: red;
       text-align: center;
       text-decoration: none;
       font-size: 14px;
       font-weight: bold;
       color: white;
       line-height: 32px;
       position: fixed;
       right:50px;
       bottom:50px; 
       opacity: 0;
       /*top: 500px;*/
     }
  </style>
</head>
<body>
   <div class="wrap">
       <a href="###" class="gotop">TOP</a>
   </div>
   <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
   <script type="text/javascript">
    $(function(){
         // 當(dāng)滾動(dòng)條滾動(dòng)大于200時(shí)出現(xiàn)，未大于，消失
         $(window).scroll(function(){
           if($(document).scrollTop()<200){
             // alert("kk");
             $(".gotop").stop().animate({
               
                 opacity: 0
                 
             },1000)
           }
           else{
             $(".gotop").show().stop().animate({
                 
                 opacity: 1
                 
             },1000)
           }
        })
       // 返回頂部
       $(".gotop").on("click",function(){
          $("html body").animate({
             scrollTop:0
          },1000)
       })
    })
   </script>
</body>
</html>

希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

EasyUI為Numberbox添加blur事件的方法
這篇文章主要介紹了EasyUI為Numberbox添加blur事件的方法 ,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03
jQuery模仿阿里云購(gòu)買服務(wù)器選擇購(gòu)買時(shí)間長(zhǎng)度的代碼
jQuery仿阿里云購(gòu)買服務(wù)器選擇時(shí)間長(zhǎng)度,操作簡(jiǎn)單，只需點(diǎn)擊所要選的時(shí)間段，對(duì)實(shí)現(xiàn)代碼感興趣的朋友參考下
2016-04-04
JQ圖片文件上傳之前預(yù)覽功能的簡(jiǎn)單實(shí)例(分享)
下面小編就為大家?guī)?lái)一篇JQ圖片文件上傳之前預(yù)覽功能的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-11-11
jQuery插件學(xué)習(xí)教程之SlidesJs輪播+Validation驗(yàn)證
這篇文章主要介紹了jQuery插件學(xué)習(xí)教程之SlidesJs輪播+Validation驗(yàn)證的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
jQuery的DOM操作之刪除節(jié)點(diǎn)示例
如果文檔中某一個(gè)元素多余，那么應(yīng)將其刪除。jQuery提供了兩種刪除節(jié)點(diǎn)的方法，remove()方法和empty()方法下面為大家詳細(xì)介紹下
2014-01-01
jQuery實(shí)現(xiàn)點(diǎn)擊彈出背景變暗遮罩效果實(shí)例代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊彈出背景變暗遮罩效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
jquery引用方法時(shí)傳遞參數(shù)原理分析
只需將js引用并設(shè)置下變量就行了，但一直沒搞明白原理，這次弄清了如何傳遞、設(shè)置多個(gè)（很多個(gè)）參數(shù)，如果你也不明白可以看看
2014-10-10
使用jQuery設(shè)置disabled屬性與移除disabled屬性
Readonly只針對(duì)input和textarea有效，而disabled對(duì)于所有的表單元素都有效，下面為大家介紹下使用jQuery設(shè)置disabled屬性
2014-08-08
jQuery Ajax前后端使用JSON進(jìn)行交互示例
本篇文章主要介紹了jQuery Ajax前后端使用JSON進(jìn)行交互示例，實(shí)現(xiàn)前端通過jQuery Ajax傳輸json到后端，后端接收json，對(duì)json進(jìn)行處理，后端返回一個(gè)json給前端，有興趣的可以了解一下。
2017-03-03
jQuery+canvas實(shí)現(xiàn)簡(jiǎn)單的球體斜拋及顏色動(dòng)態(tài)變換效果
這篇文章主要介紹了jQuery+canvas實(shí)現(xiàn)簡(jiǎn)單的球體斜拋及顏色動(dòng)態(tài)變換效果,通過jQuery+html5的canvas利用時(shí)間函數(shù)進(jìn)行實(shí)時(shí)數(shù)學(xué)運(yùn)算動(dòng)態(tài)繪制拋物線圖形的技巧,需要的朋友可以參考下
2016-01-01