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 radio（单选按钮）操作方法汇总,本文讲解了获取选中值、设置选中值、根据Value值设置选中、删除Radio、遍历等内容,需要的朋友可以参考下2015-04-04
通过jQuery实现全选或反选以及单击行改变背景色，具体代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
基于jQuery的$.getScript方法去加载javaScript文档解析
下面小编就为大家带来一篇基于jQuery的$.getScript方法去加载javaScript文档解析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
今天刚刚把jquery的插件制作学习了一下，总结一下别人写的和自己的心得，方便其他初学者的学习，考虑到要学习jquery插件制作的人一定知道jquery插件的好处和通用性，这里就不多说2012-02-02
这篇文章主要介绍了jQuery调用ajax请求的常见方法,实例汇总了三种常见的jQuery调用Ajax的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要为大家详细介绍了jQuery实现鼠标滑动切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
有了JQuery对JS的整合和封装，它让页面操作更加的随心所欲，所以只有遵循良好的规范才会让代码更高效，更健壮。以下是我对如何高效操作JQuery的一些拙见，望指正！2014-04-04
这篇文章主要介绍了使用jquery清空、复位整个输入域，非常的简单实用，这里推荐给大家,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了jQuery实现B2B网站后台管理系统侧导航，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
jQuery开源组件BootstrapValidator使用详解
这篇文章主要为大家详细介绍了jQuery开源组件BootstrapValidator的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
最新评论