jquery 跳到頂部和底部動(dòng)畫(huà)2句代碼簡(jiǎn)單實(shí)現(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>
<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)頁(yè)頂部的菜單效果代碼
- 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一直在頁(yè)面頂部顯示的方法
- jquery scrollTop方法根據(jù)滾動(dòng)像素顯示隱藏頂部導(dǎo)航條
- jQuery回到頂部的代碼
相關(guān)文章
jQuery實(shí)現(xiàn)的表格展開(kāi)伸縮效果實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的表格展開(kāi)伸縮效果,結(jié)合完整實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下2016-09-09jQuery實(shí)現(xiàn)下拉菜單滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)下拉菜單滑動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08jQuery實(shí)現(xiàn)鼠標(biāo)拖動(dòng)圖片功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)拖動(dòng)圖片功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03jQuery的選擇器中的通配符[id^=''code'']或[name^=''code'']及jquery選擇器總結(jié)
這篇文章主要介紹了jQuery的選擇器中的通配符[id^='code']或[name^='code']及jquery選擇器總結(jié)的相關(guān)資料,需要的朋友可以參考下2015-12-12javascript 全角轉(zhuǎn)換實(shí)現(xiàn)代碼
當(dāng)客戶(hù)端用戶(hù)切換輸入法至全角時(shí)可能您的表單提交會(huì)有漏洞哦!不過(guò)事實(shí)上js有這功能 可以將其轉(zhuǎn)換為非全角字符!2009-07-07chosen實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì) 介紹了chosen實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08Jquery循環(huán)截取字符串的方法(多出的字符串處理成"...")
下面小編就為大家?guī)?lái)一篇Jquery循環(huán)截取字符串的方法(多出的字符串處理成"...")。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11jQuery實(shí)現(xiàn)簡(jiǎn)單的按鈕顏色變化
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的按鈕顏色變化,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08使用jquery動(dòng)態(tài)加載Js文件和Css文件
這篇文章主要為大家詳細(xì)介紹了使用jquery動(dòng)態(tài)加載Js文件和Css文件的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-10-10