jQuery動(dòng)畫(huà)效果animate和scrollTop結(jié)合使用實(shí)例
更新時(shí)間：2014年04月02日 10:03:45 作者：
animate是jq的一個(gè)特效的函數(shù)方法，animate() 方法執(zhí)行 CSS 屬性集的自定義動(dòng)畫(huà)。該方法通過(guò)CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。
CSS屬性值是逐漸改變的，這樣就可以創(chuàng)建動(dòng)畫(huà)效果。
只有數(shù)字值可創(chuàng)建動(dòng)畫(huà)（比如 "margin:30px"）。
字符串值無(wú)法創(chuàng)建動(dòng)畫(huà)（比如 "background-color:red"）。
復(fù)制代碼 代碼如下:
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
上面的代碼表示滾動(dòng)條跳到0的位置，頁(yè)面移動(dòng)速度是800。
結(jié)合scrollTop實(shí)用示例：
復(fù)制代碼 代碼如下:
jQuery(document).ready(function($){
$('#shang').click(function(){
$('html,body').animate({scrollTop: '0px'}, 800);
});
$('#comt').click(function(){
$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);
});
$('#xia').click(function(){
$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);
});
});
表示點(diǎn)擊相關(guān)ID移動(dòng)到指定位置：
點(diǎn)擊ID為shang的元素，回到頂部；
點(diǎn)擊ID為comt的元素，回到ID為comments的位置；
點(diǎn)擊ID為xia的元素，回到底部；
相關(guān)文章
這篇文章主要介紹了JQuery radio（單選按鈕）操作方法匯總,本文講解了獲取選中值、設(shè)置選中值、根據(jù)Value值設(shè)置選中、刪除Radio、遍歷等內(nèi)容,需要的朋友可以參考下2015-04-04
通過(guò)jQuery實(shí)現(xiàn)全選或反選以及單擊行改變背景色，具體代碼如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
基于jQuery的$.getScript方法去加載javaScript文檔解析
下面小編就為大家?guī)?lái)一篇基于jQuery的$.getScript方法去加載javaScript文檔解析。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
今天剛剛把jquery的插件制作學(xué)習(xí)了一下，總結(jié)一下別人寫(xiě)的和自己的心得，方便其他初學(xué)者的學(xué)習(xí)，考慮到要學(xué)習(xí)jquery插件制作的人一定知道jquery插件的好處和通用性，這里就不多說(shuō)2012-02-02
jQuery調(diào)用ajax請(qǐng)求的常見(jiàn)方法匯總
這篇文章主要介紹了jQuery調(diào)用ajax請(qǐng)求的常見(jiàn)方法,實(shí)例匯總了三種常見(jiàn)的jQuery調(diào)用Ajax的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)鼠標(biāo)滑動(dòng)切換圖片
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑動(dòng)切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
編寫(xiě)高效jQuery代碼的4個(gè)原則和5個(gè)技巧
有了JQuery對(duì)JS的整合和封裝，它讓頁(yè)面操作更加的隨心所欲，所以只有遵循良好的規(guī)范才會(huì)讓代碼更高效，更健壯。以下是我對(duì)如何高效操作JQuery的一些拙見(jiàn)，望指正！2014-04-04
這篇文章主要介紹了使用jquery清空、復(fù)位整個(gè)輸入域，非常的簡(jiǎn)單實(shí)用，這里推薦給大家,需要的朋友可以參考下2015-04-04
jQuery實(shí)現(xiàn)B2B網(wǎng)站后臺(tái)管理系統(tǒng)側(cè)導(dǎo)航
這篇文章主要介紹了jQuery實(shí)現(xiàn)B2B網(wǎng)站后臺(tái)管理系統(tǒng)側(cè)導(dǎo)航，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
jQuery開(kāi)源組件BootstrapValidator使用詳解
這篇文章主要為大家詳細(xì)介紹了jQuery開(kāi)源組件BootstrapValidator的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06