用jquery實現(xiàn)動畫跳到頂部和底部(這個比較簡單)
更新時間:2014年09月01日 09:39:25 投稿:whsnow
用jquery實現(xiàn)動畫的跳到頂部和底部,當(dāng)點擊頂部按鈕的時候,執(zhí)行方法,scrollTop屬性獲取選中標(biāo)簽距滾動條的距離
當(dāng)點擊頂部按鈕的時候,執(zhí)行方法,scrollTop屬性獲取選中標(biāo)簽距滾動條的距離,當(dāng)點擊底部標(biāo)簽時候,執(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)點擊頂部按鈕的時候,執(zhí)行方法,scrollTop屬性獲取選中標(biāo)簽距滾動條的距離。 $('#top').click(function () { $('html').animate( { scrollTop: '0px' }, 1000 ); }); //當(dāng)點擊底部標(biāo)簽時候,執(zhí)行方法,其中offset()獲取匹配元素在當(dāng)前視口的相對偏移,返回的是一個對象,有兩個屬性top,left //animate,的第二個屬性當(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 動畫卷頁 返回頂部 動畫特效(兼容Chrome)
- jQuery 菜單隨滾條改為以定位方式(固定要瀏覽器頂部)
- js+JQuery返回頂部功能如何實現(xiàn)
- jQuery創(chuàng)建平滑的頁面滾動(頂部或底部)
- jquery實現(xiàn)固定頂部導(dǎo)航效果(仿蘑菇街)
- jquery scrollTop方法根據(jù)滾動像素顯示隱藏頂部導(dǎo)航條
- jquery 跳到頂部和底部動畫2句代碼簡單實現(xiàn)
- jQuery設(shè)置div一直在頁面頂部顯示的方法
- 使用jquery animate創(chuàng)建平滑滾動效果(可以是到頂部、到底部或指定地方)
- jQuery 頂部導(dǎo)航跟隨滾動條滾動固定浮動在頂部
- jquery滾動到頂部底部代碼
相關(guān)文章
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI實現(xiàn)樹形網(wǎng)絡(luò)基本操作(2)
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI,針對EasyUI實現(xiàn)樹形網(wǎng)絡(luò)基本操作,分為三大方面:動態(tài)加載、添加分頁、以及惰性加載節(jié)點,感興趣的小伙伴們可以參考一下2015-11-11jquery分頁插件jquery.pagination.js實現(xiàn)無刷新分頁
這篇文章主要介紹了jquery分頁插件jquery.pagination.js實現(xiàn)無刷新分頁的相關(guān)資料,需要的朋友可以參考下2016-04-04jquery對table中各數(shù)據(jù)的增加、保存、刪除操作示例
這篇文章主要介紹了jquery對table中各種數(shù)據(jù)的增加、保存、刪除操作,需要的朋友可以參考下2014-05-05jQuery實現(xiàn)倒計時功能 jQuery實現(xiàn)計時器功能
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)倒計時功能,jQuery實現(xiàn)計時器功能的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09