数据载入中,请稍后......
 
展开
懒人码库客户端 点击或扫描下载
欢迎来到懒人码库!懒人码库QQ群:19651313
欢迎来到懒人码库!懒人码库QQ群:19651313  
当前位置:懒人码库 > 前端脚本 > jQuery

jQuery动画效果animate和scrollTop结合使用实例

2017-01-16 14:55 来源:www.lanrenmaku.com / 作者:懒人 已被阅读:次 分类:jQuery 上一篇:Jquery 整理元素选取、常用方法一览表 下一篇:没有了

animate是jq的一个特效的函数方法,animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。

CSS属性值是逐渐改变的,这样就可以创建动画效果。

只有数字值可创建动画(比如 "margin:30px")。

字符串值无法创建动画(比如 "background-color:red")。

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

上面的代码表示滚动条跳到0的位置,页面移动速度是800。

结合scrollTop实用示例:

  1. jQuery(document).ready(function($){ 
  2.  $('#shang').click(function(){ 
  3.   $('html,body').animate({scrollTop: '0px'}, 800); 
  4.  }); 
  5.  $('#comt').click(function(){ 
  6.   $('html,body').animate({scrollTop:$('#comments').offset().top}, 800); 
  7.  }); 
  8.  $('#xia').click(function(){ 
  9.   $('html,body').animate({scrollTop:$('#footer').offset().top}, 800); 
  10.  }); 
  11. }); 

    表示点击相关ID移动到指定位置:

    点击ID为shang的元素,回到顶部;

    点击ID为comt的元素,回到ID为comments的位置;

    点击ID为xia的元素,回到底部;

小贴士:懒人码库 为网页前端人员提供建站常用的广告代码和网页特效,内容涵盖焦点图,导航菜单,jQuery代码,图片特效,对联广告,日历控件,在线客服等。