jquery實(shí)現(xiàn)跳到底部,回到頂部效果的簡(jiǎn)單實(shí)例(類似錨)
實(shí)例如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery實(shí)現(xiàn)跳到底部,回到頂部效果的簡(jiǎn)單實(shí)例(類似錨)</title> <script src="jquery-1.4.4.min.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(function(){ $('#top').click(function(){$('html,body').animate({scrollTop: '0px'}, 1000);return false;}); $('#foot').click(function(){$('html,body').animate({scrollTop: $('#footer').offset().top},1000);return false;}); }) </script> </head> <body> <br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /> <a href="#" id="foot">跳到底部</a> <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/><br /><br /><br /> <br/><br /><br /><br /> <br/><br /><br /><br /> <a href="#" id="top"> 返 回 頂 部 </a> <br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /> <a name="footer" id="footer"></a> </body> </html>
以上這篇jquery實(shí)現(xiàn)跳到底部,回到頂部效果的簡(jiǎn)單實(shí)例(類似錨)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- jQuery實(shí)現(xiàn)簡(jiǎn)單的回到頂部totop功能示例
- 如何利用JQuery實(shí)現(xiàn)從底部回到頂部的功能
- jquery實(shí)現(xiàn)點(diǎn)擊頁(yè)面回到頂部
- jQuery回到頂部的代碼
- jQuery實(shí)現(xiàn)帶有動(dòng)畫效果的回到頂部和底部代碼
- jquery實(shí)現(xiàn)的動(dòng)態(tài)回到頂部特效代碼
- jQuery實(shí)現(xiàn)分章節(jié)錨點(diǎn)“回到頂部”動(dòng)畫特效代碼
- jquery網(wǎng)頁(yè)回到頂部效果(圖標(biāo)漸隱,自寫)
- jQuery實(shí)現(xiàn)回到頂部效果
相關(guān)文章
jQuery實(shí)現(xiàn)可兼容IE6的滾動(dòng)監(jiān)聽功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)可兼容IE6的滾動(dòng)監(jiān)聽功能,結(jié)合實(shí)例形式分析了jQuery針對(duì)不同瀏覽器的事件監(jiān)聽、響應(yīng)及頁(yè)面屬性動(dòng)態(tài)變換相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-09-09idTabs基于JQuery的根據(jù)URL參數(shù)選擇Tab插件
我們的項(xiàng)目用了SunSean的idTabs,但每個(gè)tab里的控件會(huì)觸發(fā)postback,或者轉(zhuǎn)到其他頁(yè)面再轉(zhuǎn)回來(lái),這樣當(dāng)前選中的tab必丟。印度同事不肯用AJAX,無(wú)奈今天加班給印度人寫個(gè)demo,通過(guò)回傳URL參數(shù)來(lái)選擇tab2012-04-04jQuery EasyUI API 中文文檔 - Draggable 可拖拽
jQuery EasyUI API 中文文檔 - Draggable 可拖拽,使用jQuery EasyUI的朋友可以參考下。2011-09-09jquery模擬實(shí)現(xiàn)鼠標(biāo)指針停止運(yùn)動(dòng)事件
這篇文章主要介紹了jquery模擬實(shí)現(xiàn)鼠標(biāo)指針停止運(yùn)動(dòng)事件示例代碼,感興趣的小伙伴們可以參考一下2016-01-01使用JQUERY進(jìn)行后臺(tái)頁(yè)面布局控制DIV實(shí)現(xiàn)左右式
一個(gè)網(wǎng)站的后臺(tái)使用frame框架來(lái)實(shí)現(xiàn)這種形式,這邊作者不是使用的frame而是純div進(jìn)行布局,下面看下具體的實(shí)現(xiàn)代碼2014-01-01