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)文章
冒泡事件就是點擊子節(jié)點，會向上觸發(fā)父節(jié)點，祖先節(jié)點的點擊事件。本文主要介紹JQuery阻止事件冒泡的實例解析。需要的朋友來看下吧2016-12-12
背景顏色，比如換個心情之類的，需要記住這樣的一個狀態(tài)，下面為大家介紹下利用cookie記住背景顏色的具體實現(xiàn)，感興趣的朋友不要錯過2013-11-11
這篇文章主要介紹了jQuery插件編寫步驟,詳細分析了jQuery實現(xiàn)插件功能的具體步驟與相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
在JavaScript的jQuery庫中操作AJAX的方法講解
這篇文章主要介紹了在JavaScript的jQuery庫中操作AJAX的方法講解,包括利用jQuery簡化Ajax開發(fā)部分的內(nèi)容,需要的朋友可以參考下2015-08-08
Jquery.LazyLoad.js修正版下載，實現(xiàn)圖片延遲加載插件
之前一直有關(guān)注過Jquery.LazyLoad.js這個特效，但一直沒有用，這幾天研究了一下，并應(yīng)用于實際中，對網(wǎng)站SEO方面沒有什么幫助，不過可以節(jié)省一些流量，對于大網(wǎng)站來說顯的尤為重要，至于節(jié)省了多少流量我無從統(tǒng)計。2011-03-03
這篇文章主要介紹了jQuery實現(xiàn)“掃碼閱讀”功能方法的相關(guān)資料,需要的朋友可以參考下2015-01-01
jquery validate 實現(xiàn)動態(tài)增加/刪除驗證規(guī)則操作示例
這篇文章主要介紹了jquery validate 實現(xiàn)動態(tài)增加/刪除驗證規(guī)則操作,結(jié)合實例形式分析了jQuery validate表單驗證相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
jQuery基于json與cookie實現(xiàn)購物車的方法
這篇文章主要介紹了jQuery基于json與cookie實現(xiàn)購物車的方法,涉及jQuery操作json格式數(shù)據(jù)與cookie存儲購物車信息的相關(guān)技巧,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了jQuery中scrollLeft()方法用法,實例分析了scrollLeft()方法的功能、定義及獲取或設(shè)置匹配元素相對滾動條左側(cè)的偏移(offset)量時的使用技巧,需要的朋友可以參考下2015-01-01
JQuery操作Select的Options的Bug(IE8兼容性視圖模式)
JQuery在IE8兼容性視圖模式下操作Select的Options的Bug在本文進行重現(xiàn)并給出詳細的解決方法，感興趣的朋友可以參考下哈，希望對你有所幫助2013-04-04