jQuery动画效果animate和scrollTop结合使用实例
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的元素,回到底部;
本文来自:http://www.68idc.cn/help/makewebs/javascript/2014040378958.html
jQuery动画效果animate和scrollTop结合使用实例的更多相关文章
- jquery动画效果---animate()--滚屏
jquery动画效果---animate()方法---W3school
- JQuery动画效果
jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...
- python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- jQuery中效果animate方法解决width是百分比出现的问题
jQuery中效果animate方法解决width是百分比出现的问题 http://www.mafutian.net/131.html 问题描述: 效果如图,初始化,每个层宽20%,采用animate ...
- Jquery——动画效果
jquery中常用的动画的方法就是hide()与show(). $(element).hide()这段代码可以与这相等element.css("display","non ...
- jQuery操作标签,jQuery事件操作,jQuery动画效果,前端框架
jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...
- jquery 动画效果插件
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- jquery动画效果中,避免持续反应用户的连续点击
一.某些动画效果中,避免持续连续反应用户的连续点击(这标题真不好描述) 意思就是指用户点击速度很快,完成一次效果的时间不能很快结束的话,就会出现用户不点击了,效果还在持续.看下面例子就明白了,手风琴效 ...
随机推荐
- 新闻类网站rss接口的编写心得
使用的是Jdom中的相关API,具体步骤如下 要求的格式: <rss xmlns:content="http://purl.org/rss/1.0/modules/content/&q ...
- 奇妙的CSS之布局与定位
前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...
- jquery简介和实例
一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. 参考:http://www.php100 ...
- Oracle a Parameter with multi value
备注:此两种方案,都因为oracle内部字符函数的参数长度4000限制.另外,个人测试,性能不如”将数据插入物理表再JOIN查询“或”每1000次ID做一次IN查询“的总的运行速度. 即ID的个数越 ...
- JVM-内存管理
都说搞C的牛叉,那是因为C解决问题,全靠程序员自己,他们对自己的程序在内存中是什么样了如指掌.而Java呢不需要有太多操作系统的知识,不用时刻注意内存的问题,但这不代表我们就不用去了解它背后的原理.J ...
- tomcat 应用部署的几点注意
将应用部署到Tomcat根目录的目的是可以通过"http://[ip]:[port]"直接访问应用,而不是使用"http://[ip]:[port]/[appName]& ...
- Redis 支持的5种数据结构
redis的崛起绝非偶然,它确实有自己的新东西在里面,它不像Memcached,只能将数据存储在内存中,它提供了持久化机制和数据同步,避免了宕机后的雪崩的问题,即服务器出现问题后,内存中保留的原始数据 ...
- 项 目 管 理 知 识 体 系 指 南 (PMBOK2008)
项 目 管 理 知 识 体 系 指 南 (第4版) PMBOK2008 输入 工具与技术 输出 4.项目整合管理 4.1 制定项目章程 4.1.1.1 项目工作说明书 4.1.2.1 专家判断 4.1 ...
- TCP Provider The semaphore timeout period has expired
我们一数据库服务器上有个作业最近几天偶尔会遇到下面错误(敏感信息已做处理),主要是报"TCP Provider: The semaphore timeout period has expir ...
- 15天玩转redis —— 第十一篇 让你彻底了解RDB存储结构
接着上一篇说,这里我们来继续分析一下RDB文件存储结构,首先大家都知道RDB文件是在redis的“快照”的模式下才会产生,那么如果 我们理解了RDB文件的结构,是不是让我们对“快照”模式能做到一个心中 ...