jquery 跳到頂部和底部動(dòng)畫2句代碼簡單實(shí)現(xiàn)
更新時(shí)間：2013年07月18日 17:43:45 作者：
使用2句代碼簡單實(shí)現(xiàn)jquery動(dòng)畫的跳到頂部和底部；當(dāng)點(diǎn)擊頂部按鈕的時(shí)候，執(zhí)行方法,scrollTop屬性獲取選中標(biāo)簽距滾動(dòng)條的距離，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下
復(fù)制代碼 代碼如下:
<!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>
<title>Untitled Page</title>
<script type="text/javascript" src=jquery-1.8.0.js></script>
<script>
$(document).ready(function () {
//當(dāng)點(diǎn)擊頂部按鈕的時(shí)候，執(zhí)行方法,scrollTop屬性獲取選中標(biāo)簽距滾動(dòng)條的距離。
$('#top').click(function () {
$('html').animate(
{ scrollTop: '0px' }, 1000
);
});
//當(dāng)點(diǎn)擊底部標(biāo)簽時(shí)候，執(zhí)行方法，其中offset()獲取匹配元素在當(dāng)前視口的相對(duì)偏移,返回的是一個(gè)對(duì)象，有兩個(gè)屬性top,left
//animate,的第二個(gè)屬性當(dāng)然我們也可以設(shè)置'slow','normal'或'fast'
$('#foot').click(function () {
$('html').animate(
{scrollTop:$('span').offset().top},1000
);
});
});
</script>
</head>
<body>
<br /> <br /> <br /> <br /> <br />
<a href="#" id="foot">底部</a>
<br /> <br /> <br /> <br /> <br />
<br /> <br /> <br /> <br /> <br />
<a href="#" id="top">頂部</a>
<br /> <br /> <br /> <br /> <br />
<span></span>
</body>
</html>
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)固定在網(wǎng)頁頂部的菜單效果代碼
- jquery小火箭返回頂部代碼分享
- Jquery實(shí)現(xiàn)頂部彈出框特效
- jQuery實(shí)現(xiàn)返回頂部效果的方法
- jQuery 頂部導(dǎo)航跟隨滾動(dòng)條滾動(dòng)固定浮動(dòng)在頂部
- 使用jquery animate創(chuàng)建平滑滾動(dòng)效果（可以是到頂部、到底部或指定地方）
- jQuery設(shè)置div一直在頁面頂部顯示的方法
- jquery scrollTop方法根據(jù)滾動(dòng)像素顯示隱藏頂部導(dǎo)航條
- jQuery回到頂部的代碼
相關(guān)文章
jQuery 是最流行和使用最廣泛的 JavaScript 框架，它簡化了HTML文檔遍歷，事件處理，動(dòng)畫以及Ajax交互，幫助Web開發(fā)人員更快速的實(shí)現(xiàn)各種精美的界面效果2012-03-03
JQuery頁面的表格數(shù)據(jù)的增加與分頁的實(shí)現(xiàn)
使用JQuery實(shí)現(xiàn)頁面的表格數(shù)據(jù)的增加與分頁，具體示例如下，喜歡的朋友可以參考下2013-12-12
jQuery基于toggle實(shí)現(xiàn)click觸發(fā)DIV的顯示與隱藏問題分析
這篇文章主要介紹了jQuery基于toggle實(shí)現(xiàn)click觸發(fā)DIV的顯示與隱藏,結(jié)合實(shí)例形式分析了toggle方法用于切換頁面元素樣式的相關(guān)使用技巧,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了JQuery實(shí)現(xiàn)可直接編輯的表格,實(shí)例分析了jQuery動(dòng)態(tài)操作編輯表格的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
jQuery Selectors(選擇器)的使用(二、層次篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法，我將以實(shí)例方式進(jìn)行講述，以簡單，全面為基礎(chǔ)，不會(huì)涉及很深，我的學(xué)習(xí)方法：先入門，后進(jìn)階！2009-12-12
一個(gè)用jquery寫的判斷div滾動(dòng)條到底部的方法【推薦】
下面小編就為大家?guī)硪黄粋€(gè)用jquery寫的判斷div滾動(dòng)條到底部的方法【推薦】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧2016-04-04
jquery中實(shí)現(xiàn)標(biāo)簽切換效果的代碼
現(xiàn)在比較流行jquery插件，所以既然用了jquery那么就要用好，也不用大量的寫代碼了。2011-03-03
jQuery(1.3.2) 7行代碼搞定跟隨屏幕滾動(dòng)的層
jQuery(1.3.2)7行代碼搞定跟隨屏幕滾動(dòng)的層，代碼很精簡啊，非常不錯(cuò)。2009-05-05
國外著名博客WDL發(fā)布了2011年度最佳 jQuery 插件。jQuery 自2006年發(fā)布以來，經(jīng)過五年的迅速發(fā)展，目前已是最流行和使用最廣泛的 JavaScript 框架2012-03-03
jQuery.cookie.js使用方法及相關(guān)參數(shù)解釋
一個(gè)輕量級(jí)的cookie 插件，可以讀取、寫入、刪除 cookie。這篇文章主要介紹了jQuery.cookie.js使用方法及相關(guān)參數(shù)解釋,需要的朋友可以參考下2017-03-03