jquery 跳到頂部和底部動畫2句代碼簡單實現(xiàn)
更新時間:2013年07月18日 17:43:45 作者:
使用2句代碼簡單實現(xiàn)jquery動畫的跳到頂部和底部;當點擊頂部按鈕的時候,執(zhí)行方法,scrollTop屬性獲取選中標簽距滾動條的距離,具體的實現(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 () {
//當點擊頂部按鈕的時候,執(zhí)行方法,scrollTop屬性獲取選中標簽距滾動條的距離。
$('#top').click(function () {
$('html').animate(
{ scrollTop: '0px' }, 1000
);
});
//當點擊底部標簽時候,執(zhí)行方法,其中offset()獲取匹配元素在當前視口的相對偏移,返回的是一個對象,有兩個屬性top,left
//animate,的第二個屬性當然我們也可以設(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>
相關(guān)文章
jQuery的選擇器中的通配符[id^=''code'']或[name^=''code'']及jquery選擇器總結(jié)
這篇文章主要介紹了jQuery的選擇器中的通配符[id^='code']或[name^='code']及jquery選擇器總結(jié)的相關(guān)資料,需要的朋友可以參考下2015-12-12javascript 全角轉(zhuǎn)換實現(xiàn)代碼
當客戶端用戶切換輸入法至全角時可能您的表單提交會有漏洞哦!不過事實上js有這功能 可以將其轉(zhuǎn)換為非全角字符!2009-07-07chosen實現(xiàn)省市區(qū)三級聯(lián)動
這篇文章主要為大家詳細 介紹了chosen實現(xiàn)省市區(qū)三級聯(lián)動,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-08-08Jquery循環(huán)截取字符串的方法(多出的字符串處理成"...")
下面小編就為大家?guī)硪黄狫query循環(huán)截取字符串的方法(多出的字符串處理成"...")。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11