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 学习笔记(一)DOM基本操作
Apr 08 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
Vuex的热更替如何实现
Jun 05 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
php 购物车实例(申精)
2009/05/11 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
javascript读写json示例
2014/04/11 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
python使用epoll实现服务端的方法
2018/10/16 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Python中有几个关键字
2020/06/04 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
工商管理实习自我鉴定
2013/09/28 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
给老婆的保证书范文
2014/04/28 职场文书
加油口号大全
2014/06/13 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
奖学金个人总结
2015/03/04 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
总经理聘用协议书
2015/09/21 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js