jquery實現(xiàn)跳到底部，回到頂部效果的簡單實例(類似錨)
更新時間：2016年07月10日 10:22:37 投稿：jingxian
下面小編就為大家?guī)硪黄猨query實現(xiàn)跳到底部，回到頂部效果的簡單實例(類似錨)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
實例如下：
<!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實現(xiàn)跳到底部，回到頂部效果的簡單實例(類似錨)</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實現(xiàn)跳到底部，回到頂部效果的簡單實例(類似錨)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實現(xiàn)可兼容IE6的滾動監(jiān)聽功能
這篇文章主要介紹了jQuery實現(xiàn)可兼容IE6的滾動監(jiān)聽功能,結(jié)合實例形式分析了jQuery針對不同瀏覽器的事件監(jiān)聽、響應(yīng)及頁面屬性動態(tài)變換相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-09-09
idTabs基于JQuery的根據(jù)URL參數(shù)選擇Tab插件
我們的項目用了SunSean的idTabs，但每個tab里的控件會觸發(fā)postback，或者轉(zhuǎn)到其他頁面再轉(zhuǎn)回來，這樣當前選中的tab必丟。印度同事不肯用AJAX，無奈今天加班給印度人寫個demo，通過回傳URL參數(shù)來選擇tab2012-04-04
本文簡單介紹了jQuery對象初始化傳參方式，以及具體的示例，是篇非常不錯的文章，這里推薦給小伙伴們。2015-02-02
jQuery EasyUI API 中文文檔 - Draggable 可拖拽
jQuery EasyUI API 中文文檔 - Draggable 可拖拽,使用jQuery EasyUI的朋友可以參考下。2011-09-09
這篇文章主要介紹了jquery模擬實現(xiàn)鼠標指針停止運動事件示例代碼，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了Jquery.datatables 學(xué)習(xí)筆記之自定義button按鈕,需要的朋友可以參考下2014-06-06
測試代碼如下,本例子中設(shè)置的著色比較多，哈，都是隨便輸些數(shù)字進去的，感覺這樣更容易讓大家看到效果，呵，如果我的講的有哪不好麻煩大家多留言教導(dǎo)下^^2009-07-07
使用JQUERY進行后臺頁面布局控制DIV實現(xiàn)左右式
一個網(wǎng)站的后臺使用frame框架來實現(xiàn)這種形式，這邊作者不是使用的frame而是純div進行布局，下面看下具體的實現(xiàn)代碼2014-01-01
上文介紹了利用$函數(shù)篩選頁面上的元素和替代onload事件。$函數(shù)還有一個作用，當它的參數(shù)是一個HTML片段的時候，它返回的是包含這個HTML元素的包裝集。2010-03-03
JQuery UI有著非常豐富的皮膚，JQuery官方提供的就有十幾套，除了官方提供的之外，JQuery還提供了定制皮膚的服務(wù)2009-07-07