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


Posted in Javascript onApril 02, 2014

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的元素,回到底部;
Javascript 相关文章推荐
javascript学习随笔(使用window和frame)的技巧
Mar 08 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
深入浅析react native es6语法
Dec 09 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
利用js实现简单开关灯代码
Nov 23 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 #Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 #Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 #Javascript
自己实现ajax封装示例分享
Apr 01 #Javascript
jquery分页对象使用示例
Apr 01 #Javascript
JavaScript对象的property属性详解
Apr 01 #Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 #Javascript
You might like
动态新闻发布的实现及其技巧
2006/10/09 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
Python unittest框架操作实例解析
2020/04/13 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
商务英语专业求职信范文
2014/01/28 职场文书
团支部推优材料
2014/05/21 职场文书
庆七一主持词
2015/06/29 职场文书