快捷導(dǎo)航

jquery實(shí)現(xiàn)跳到底部，回到頂部效果的簡(jiǎn)單實(shí)例(類似錨)

更新時(shí)間：2016年07月10日 10:22:37 投稿：jingxian

下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)跳到底部，回到頂部效果的簡(jiǎn)單實(shí)例(類似錨)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

實(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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