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时ie6和ie7,ff的区别
Aug 19 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
JavaScript数据类型详解
Apr 01 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
微信小程序 引入es6 promise
Apr 12 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 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 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
php自定义hash函数实例
2015/05/05 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序
2017/02/19 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
初中数学教学反思
2014/01/16 职场文书
Python中for后接else的语法使用
2021/05/18 Python
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript