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获得指定对象大小的方法
Jul 01 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 Javascript
简介JavaScript错误处理机制
Aug 04 Javascript
Array.filter中如何正确使用Async
Nov 04 Javascript
JavaScript实现点击切换功能
Jan 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
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
python三方库之requests的快速上手
2019/03/04 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
Django实现基于类的分页功能
2019/10/31 Python
亲子读书活动方案
2014/02/22 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
承诺书模板
2014/08/30 职场文书
法定代表人授权委托书
2014/09/19 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
Python实现Hash算法
2022/03/18 Python