首頁 > 開發者 > JavaScript
jQuery實現返回頂部功能適合不支援js的瀏覽器，jquery返回頂部
很多網站上都有返回頂部的效果，本文闡述如何使用jquery實現返回頂部按鈕。
首先需要在頂部添加如下html元素：
<p id="back-to-top"><a href="#top" rel="external nofollow" ><span></span>返回頂部</a></p>
其中a標籤指向錨點top，可以在頂部防止一個<a name="top"></a>的錨點，這樣在瀏覽器不支援js時也可以實現返回頂部的效果了。
要想讓返回頂部的圖片顯示在右側，還需要一些css樣式，如下：
/*returnTop*/ p#back-to-top{ position:fixed; display:none; bottom:100px; right:80px; } p#back-to-top a{ text-align:center; text-decoration:none; color:#d1d1d1; display:block; width:64px; /*使用CSS3中的transition屬性給跳轉連結中的文字添加漸層效果*/ -moz-transition:color 1s; -webkit-transition:color 1s; -o-transition:color 1s; } p#back-to-top a:hover{ color:#979797; } p#back-to-top a span{ background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px; border-radius:6px; display:block; height:64px; width:56px; margin-bottom:5px; /*使用CSS3中的transition屬性給<span>標籤背景顏色添加漸層效果*/ -moz-transition:background 1s; -webkit-transition:background 1s; -o-transition:background 1s; } #back-to-top a:hover span{ background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px; }
上面樣式中的背景圖片是雪碧圖，下面提供兩個單獨的返回頂部圖片方便朋友們使用：
有了html和樣式，我們還需要用js控制返回頂部按鈕，在頁面滾動時漸隱漸現返回頂部按鈕。
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script> <script> $(function(){ //當捲軸的位置處於距頂部100像素以下時，跳轉連結出現，否則消失 $(function () { $(window).scroll(function(){ if ($(window).scrollTop()>100){ $("#back-to-top").fadeIn(1500); } else { $("#back-to-top").fadeOut(1500); } }); //當點擊跳轉連結後，回到頁面頂部位置 $("#back-to-top").click(function(){ $('body,html').animate({scrollTop:0},1000); return false; }); }); }); </script>
這樣就可以了。
注意在載入頁面後需要向下拖動一點捲軸才可以看到返回頂部的。
PS：如果不麻煩，我怎麼會提問呢~~ 回答： 還可以用<a href="javascript:scroll(0,0)">返回頂部</a> 其實用#是最通用的，我不知道你為什麼靜態頁面會，動態網頁面就不會了，#對於靜態還是動態都不影響的。 追問： 額~~關鍵是我不知道，那個返回頂部的位置為什麼不會動，一直處於那個位置，不受頁面的拉動的影響。就像新浪微博的那樣，要不你看看新浪微博是怎樣的？然後給個全代碼？ 回答： 我暈哦，那這個和返回頂部的功能什麼關係。。。這個是層浮動啊，就像是廣告浮動那樣，你用浮動廣告的指令碼就可以了。 追問： 你給個完整代碼唄~~ 回答： <html><head><script>lastScrollY=0;function heartBeat(){var diffY;if (document.documentElement && document.documentElement.scrollTop)diffY = document.documentElement.scrollTop;else if (document.body)diffY = document.body.scrollTopelse{/*Netscape stuff*/}percent=.1*(diffY-lastScrollY);if(percent>0)percent=Math.ceil(percent);else percent=Math.floor(percent);document.getElementById("full").style.top=parseInt(document.getElementById("full").style.top)+percent+"px";lastScrollY=lastScrollY+percent;}window.setInterval("heartBeat()",1);</script></head><body><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><......餘下全文>>
怎用JS或JQUERY判斷瀏覽器的返回操作
是要實現瀏覽器不能有返回操作嗎？可以使用history.forward();history. back();來控制瀏覽器的前進後退功能
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
