jQuery动画效果animate和scrollTop结合使用实例
2023-09-11 14:19:23 时间
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的元素,回到底部;
原生js如何实现jQuery.animate中的scrollTop方法
网上找不到一个好的介绍来实现,
$('html, body').animate({
scrollTop: 800
}, 1000)
怎么控制这个scrollTop的 时间呢?
相关文章
- jQuery - checkbox enable/disable
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)
- jquery $.proxy使用 Jquery实现ready()的源码
- jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
- 【JavaScript】jQuery Ajax 实例 全解析
- jQuery碎语(2) 事件
- 你可能不需要 jQuery!使用原生 JavaScript 进行开发
- jQuery File Upload 单页面多实例的实现
- PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )
- jQuery验证控件jquery.validate.js的使用介绍
- jquery ready 延迟
- jquery.params.js,Jquery获取页面参数,js获取页面参数
- jQuery插件之验证控件jquery.validate.js
- Nice Jquery Validator 【从 jQuery Validation 迁移】
- Selenium2学习-014-WebUI自动化实战实例-012-Selenium 操作下拉列表实例-div+{js|jquery}
- jquery中提示框layer.msg()设置时间及相关用法
- Jquery学习—jquery的事件
- jquery经典实例之图片轮播
- jquery经典实例之可拖拽的弹出层
- jquery经典实例之回到顶部
- jQuery效果-隐藏与显示
- 最最基层的ajax交互代码jquery+java之间的json跨域传递以及java的json代码返回
- 十七.jQuery源码解析之入口方法Sizzle(1)
**bold**
_italic_
[link](http://example.com)
> 引用
`code`
- 列表
。 同时,被你 @ 的用户也会收到通知