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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
React Router V4使用指南(精讲)
Sep 17 Javascript
如何封装Vue Element的table表格组件
Feb 06 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开发中的错误收集,不定期更新。
2011/02/03 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
python encode和decode的妙用
2009/09/02 Python
Python中Collection的使用小技巧
2014/08/18 Python
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
python实现的简单文本类游戏实例
2015/04/28 Python
详解使用Python处理文件目录的相关方法
2015/10/16 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
python实现整数的二进制循环移位
2019/03/08 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
详解Anaconda 的安装教程
2020/09/23 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
艺术系应届生的自我评价
2013/10/19 职场文书
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
水电工程师岗位职责
2015/02/13 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
R9700摩机记
2022/04/05 无线电
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技