用jquery實(shí)現(xiàn)動(dòng)畫跳到頂部和底部(這個(gè)比較簡單)
當(dāng)點(diǎn)擊頂部按鈕的時(shí)候,執(zhí)行方法,scrollTop屬性獲取選中標(biāo)簽距滾動(dòng)條的距離,當(dāng)點(diǎn)擊底部標(biāo)簽時(shí)候,執(zhí)行方法,其中offset()獲取匹配元素在當(dāng)前視口的相對偏移
<!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)前視口的相對偏移,返回的是一個(gè)對象,有兩個(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 動(dòng)畫卷頁 返回頂部 動(dòng)畫特效(兼容Chrome)
- jQuery 菜單隨滾條改為以定位方式(固定要瀏覽器頂部)
- js+JQuery返回頂部功能如何實(shí)現(xiàn)
- jQuery創(chuàng)建平滑的頁面滾動(dòng)(頂部或底部)
- jquery實(shí)現(xiàn)固定頂部導(dǎo)航效果(仿蘑菇街)
- jquery scrollTop方法根據(jù)滾動(dòng)像素顯示隱藏頂部導(dǎo)航條
- jquery 跳到頂部和底部動(dòng)畫2句代碼簡單實(shí)現(xiàn)
- jQuery設(shè)置div一直在頁面頂部顯示的方法
- 使用jquery animate創(chuàng)建平滑滾動(dòng)效果(可以是到頂部、到底部或指定地方)
- jQuery 頂部導(dǎo)航跟隨滾動(dòng)條滾動(dòng)固定浮動(dòng)在頂部
- jquery滾動(dòng)到頂部底部代碼
相關(guān)文章
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI實(shí)現(xiàn)樹形網(wǎng)絡(luò)基本操作(2)
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI,針對EasyUI實(shí)現(xiàn)樹形網(wǎng)絡(luò)基本操作,分為三大方面:動(dòng)態(tài)加載、添加分頁、以及惰性加載節(jié)點(diǎn),感興趣的小伙伴們可以參考一下2015-11-11jquery實(shí)現(xiàn)平滑的二級(jí)下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)平滑的二級(jí)下拉菜單效果,可實(shí)現(xiàn)鼠標(biāo)滑過彈出二級(jí)下拉菜單,涉及jquery鼠標(biāo)hover事件及fadeIn與fadeOut事件操作頁面元素隱藏及顯示的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-08-08jquery幻燈片插件bxslider樣式改進(jìn)實(shí)例
這篇文章主要介紹了jquery幻燈片插件bxslider樣式改進(jìn),對比官方樣式以實(shí)例形式講述了改進(jìn)的技巧,非常實(shí)用,需要的朋友可以參考下2014-10-10jquery分頁插件jquery.pagination.js實(shí)現(xiàn)無刷新分頁
這篇文章主要介紹了jquery分頁插件jquery.pagination.js實(shí)現(xiàn)無刷新分頁的相關(guān)資料,需要的朋友可以參考下2016-04-04jquery對table中各數(shù)據(jù)的增加、保存、刪除操作示例
這篇文章主要介紹了jquery對table中各種數(shù)據(jù)的增加、保存、刪除操作,需要的朋友可以參考下2014-05-05JQuery animate動(dòng)畫應(yīng)用示例
這篇文章主要介紹了JQuery animate動(dòng)畫應(yīng)用,結(jié)合具體實(shí)例形式分析了jQuery使用animate動(dòng)畫實(shí)現(xiàn)選項(xiàng)卡及樣式動(dòng)態(tài)變化相關(guān)操作技巧,需要的朋友可以參考下2019-05-05jquery的index方法實(shí)現(xiàn)tab效果
jquery的index方法實(shí)現(xiàn)tab效果,需要的朋友可以參考下。2011-02-02jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能 jQuery實(shí)現(xiàn)計(jì)時(shí)器功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能,jQuery實(shí)現(xiàn)計(jì)時(shí)器功能的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09