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 相关文章推荐
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
在JavaScript中实现链式调用的实现
Dec 24 Javascript
在webstorm中配置less的方法详解
Sep 25 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
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的特殊设置
2006/10/09 PHP
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
js 函数的副作用分析
2011/08/23 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
解析python实现Lasso回归
2019/09/11 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
python手写均值滤波
2020/02/19 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
python 装饰器的基本使用
2021/01/13 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
大学军训感言200字
2014/02/26 职场文书
德语专业求职信
2014/03/12 职场文书
学生请假条格式
2014/04/11 职场文书
《长征》教学反思
2014/04/27 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js