jQuery動畫效果animate和scrollTop結合使用實例_jquery

CSS屬性值是逐漸改變的，這樣就可以創造動畫效果。
只有數字值可建立動畫（例如 "margin:30px"）。
字串值無法建立動畫（例如 "background-color:red"）。

複製程式碼 程式碼如下:

$('#shang').click(function(){$ ('html,body').animate({scrollTop: '0px'}, 800);});

上面的程式碼表示滾動條跳到0的位置，頁面移動速度是800。
結合scrollTop實用範例：

複製程式碼 程式碼如下:

程式碼如下:


.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);
 });
});

表示點選相關ID移動到指定位置：點選ID為shang的元素，回到頂部；點選ID為comt的元素，回到ID為comments的位置；點選ID為xia的元素，回到底部；