jquery實(shí)現(xiàn)小火箭返回頂部案例，供大家參考，具體內(nèi)容如下
1. 滾動(dòng)頁面，當(dāng)頁面距離頂部超出1000px，顯示小火箭。
封裝在scroll函數(shù)里，當(dāng)前頁面距離頂部為$(window).scrollTop >=1000
小火箭顯示和隱藏用fadeIn和fadeOut
//當(dāng)頁面超出1000px的時(shí)候，讓小火箭顯示，如果小于1000px，則隱藏 $(window).scroll(function () { if ($(window).scrollTop() >= 1000) { $(".actGotop").stop().fadeIn(1000); } else { $(".actGotop").stop().fadeOut(1000); } })});2. 當(dāng)小火箭出現(xiàn)后，點(diǎn)擊小火箭，返回到頁面頂部。
在外面出冊(cè)點(diǎn)擊事件，獲取頁面，html或者body, 返回用animate動(dòng)畫函數(shù)，到頂部即scrollTop為0，時(shí)間可以設(shè)置
$(".actGotop").click(function () { $("html,body").stop().animate({ scrollTop: 0 }, 1000); }); 3. 如果要讓小火箭點(diǎn)擊后，直接回到頂部，可以只設(shè)置$(window).scrollTop(0)，既可
$(".actGotop").click(function () { //$("html,body").stop().animate({ scrollTop: 0 }, 1000); //scrollTop為0 $(window).scrollTop(0); });整體代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { height: 8000px; } a { color: #FFF; } .actGotop { position: fixed; bottom: 50px; right: 50px; width: 150px; height: 195px; display: none; z-index: 100; } .actGotop a, .actGotop a:link { width: 150px; height: 195px; display: inline-block; background: url(images/gotop.png) no-repeat; outline: none; } .actGotop a:hover { width: 150px; height: 195px; background: url(images/gotop.gif) no-repeat; outline: none; } </style></head><body> <!-- 返回頂部小火箭 --> <div class="actGotop"><a href="javascript:;" rel="external nofollow" title="Top"></a></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { //當(dāng)頁面超出1000px的時(shí)候，讓小火箭顯示，如果小于1000px，則隱藏 $(window).scroll(function () { if ($(window).scrollTop() >= 1000) { $(".actGotop").stop().fadeIn(500); } else { $(".actGotop").stop().fadeOut(500); } }) }); //在外面注冊(cè) $(".actGotop").click(function () { $("html,body").stop().animate({ scrollTop: 0 }, 1000); //scrollTop為0 // $(window).scrollTop(0); }); </script></body></html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。
新聞熱點(diǎn)
疑難解答
圖片精選
