jQuery動(dòng)畫效果animate和scrollTop結(jié)合使用實(shí)例
更新時(shí)間：2014年04月02日 10:03:45 作者：
animate是jq的一個(gè)特效的函數(shù)方法，animate() 方法執(zhí)行 CSS 屬性集的自定義動(dòng)畫。該方法通過CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。
CSS屬性值是逐漸改變的，這樣就可以創(chuàng)建動(dòng)畫效果。
只有數(shù)字值可創(chuàng)建動(dòng)畫（比如 "margin:30px"）。
字符串值無法創(chuàng)建動(dòng)畫（比如 "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之Bind方法參數(shù)傳遞與接收的三種方法
這篇文章主要介紹了Jquery的Bind方法參數(shù)傳遞與接收的三種方法,需要的朋友可以參考下2014-06-06
大家在逛淘寶的時(shí)候，把鼠標(biāo)放在寶貝上就會(huì)放大，奇怪這種效果怎么實(shí)現(xiàn)的，下面小編就給大家分享基于jquery實(shí)現(xiàn)放大鏡效果，有需要的朋友可以參考下2015-08-08
項(xiàng)目中做角色授權(quán)時(shí)，需要做一個(gè)下拉框帶樹結(jié)構(gòu)的 并且可以多選的組件，就想到了easyui的combotree，下面通過實(shí)例代碼給大家介紹下Easyui 下拉樹組件combotree2016-12-12
jQuery實(shí)現(xiàn)百葉窗焦點(diǎn)圖動(dòng)畫效果代碼分享(附源碼下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)百葉窗焦點(diǎn)圖動(dòng)畫效果代碼分享(附源碼下載)的相關(guān)資料,需要的朋友可以參考下2016-03-03
因?yàn)閖query的易用性，很多朋友使用jquery，但仍然需要注意的是性能的問題，下面是曾祥展特為大家整理的一些技巧。2010-12-12
這篇文章主要介紹了jQuery圖片輪播滾動(dòng)切換特效，圖片輪播效果特別適合做產(chǎn)品展示，感興趣的小伙伴可以參考下。2015-09-09
使用jquery的ajax需要注意的地方dataType的設(shè)置
沒有設(shè)置dataType:'json',就出現(xiàn)無法解析返回的data數(shù)據(jù)，會(huì)把data當(dāng)作字符串處理，而不是json對(duì)象，記得以前是不用設(shè)dataType的，很奇怪，不知道是不是跟jquery版本有關(guān)系2013-08-08
同事在網(wǎng)上的找的下拉列表框出現(xiàn)位置不對(duì)的和加載慢的BUG，反正多選下拉列表框?qū)崿F(xiàn)也很簡(jiǎn)單，與其看那些結(jié)構(gòu)混亂的代碼，不如自己重新實(shí)現(xiàn)一個(gè)2012-07-07
下面小編就為大家?guī)硪黄獙?duì)jQuary選擇器的全面總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
jQuery是目前非常流行的Javascript庫(kù)之一，隨著jQuery應(yīng)用程序的逐漸增多，其性能優(yōu)化問題是程序員們不可忽視的，我們知道在jQuery中最快的選擇器是ID選擇器，因?yàn)樗苯觼碜杂贘avaScript的getElementById()方法。2010-09-09