jQuery动画效果animate和scrollTop结合使用实例
更新时间：2014年04月02日 10:03:45 作者：
animate是jq的一个特效的函数方法，animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。
CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）。
字符串值无法创建动画（比如 "background-color:red"）。
复制代码 代码如下:
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
上面的代码表示滚动条跳到0的位置，页面移动速度是800。
结合scrollTop实用示例：
复制代码 代码如下:
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);
});
});
表示点击相关ID移动到指定位置：
点击ID为shang的元素，回到顶部；
点击ID为comt的元素，回到ID为comments的位置；
点击ID为xia的元素，回到底部；
相关文章
这篇文章主要介绍了Jquery的Bind方法参数传递与接收的三种方法,需要的朋友可以参考下2014-06-06
大家在逛淘宝的时候，把鼠标放在宝贝上就会放大，奇怪这种效果怎么实现的，下面小编就给大家分享基于jquery实现放大镜效果，有需要的朋友可以参考下2015-08-08
项目中做角色授权时，需要做一个下拉框带树结构的 并且可以多选的组件，就想到了easyui的combotree，下面通过实例代码给大家介绍下Easyui 下拉树组件combotree2016-12-12
这篇文章主要介绍了jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)的相关资料,需要的朋友可以参考下2016-03-03
因为jquery的易用性，很多朋友使用jquery，但仍然需要注意的是性能的问题，下面是曾祥展特为大家整理的一些技巧。2010-12-12
这篇文章主要介绍了jQuery图片轮播滚动切换特效，图片轮播效果特别适合做产品展示，感兴趣的小伙伴可以参考下。2015-09-09
使用jquery的ajax需要注意的地方dataType的设置
没有设置dataType:'json',就出现无法解析返回的data数据，会把data当作字符串处理，而不是json对象，记得以前是不用设dataType的，很奇怪，不知道是不是跟jquery版本有关系2013-08-08
同事在网上的找的下拉列表框出现位置不对的和加载慢的BUG，反正多选下拉列表框实现也很简单，与其看那些结构混乱的代码，不如自己重新实现一个2012-07-07
下面小编就为大家带来一篇对jQuary选择器的全面总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
jQuery是目前非常流行的Javascript库之一，随着jQuery应用程序的逐渐增多，其性能优化问题是程序员们不可忽视的，我们知道在jQuery中最快的选择器是ID选择器，因为它直接来自于JavaScript的getElementById()方法。2010-09-09
最新评论