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动画效果中,避免持续反应用户的连续点击
一.某些动画效果中,避免持续连续反应用户的连续点击(这标题真不好描述) 意思就是指用户点击速度很快,完成一次效果的时间不能很快结束的话,就会出现用户不点击了,效果还在持续.看下面例子就明白了,手风琴效 ...
随机推荐
- Docker化运维方式讲解
应用迁移需求 应用运维需要考虑的一个重要问题就是迁移, 在不同机器.机房.环境间迁移.迁移的原因有很多, 比如硬件过保(硬件故障), 机房迁移, 应用扩缩容等. 应用迁移的核心需求是: 简单.迁移操作 ...
- logstash VS splunk
web 系统是典型的分布式部署,由此对其运行状况,硬件运转情况监控也显得尤为重要,这些监控数据表面上对业务运行没有多大的用处(属于基础数据),但正是这些基础数据形成了业务“流”.比如,用户搜索爱好,浏 ...
- Docker的4种网络模式
我们在使用docker run创建Docker容器时,可以用--net选项指定容器的网络模式,Docker有以下4种网络模式: · host模式,使用--net=host指定. · container ...
- Android-配置文件中设置“android:clickable="false"无效的原因及解决办法
开发中遇到的问题:要实现一个button初始为不可点击,于是在配置文件中设置了android:clickable="false"运行后发现还是可以点击,于是写在了Activity中 ...
- [转]设计一款Android App总结
开发工具的选择 开发工具我将选用Android Studio,它是Google官方指定的Android开发工具,目前是1.2.2稳定版,1.3的预览版也已经发布了.Android Studio的优点就 ...
- iOS FFmpeg 优秀博客(资源)集锦
iOS FFmpeg 优秀博客(资源)集锦 这篇博客没有我自己写的内容: 主要是对FFmpeg一些优秀博客的记录 随时更新 1>iOS编译FFmpeg,kxmovie实现视频播放 2>视音 ...
- VS2015 Git使用教程——优化项目编辑日志
一.前言 公司项目中,修改日志管理是一件很繁琐的事情,而且项目维护时间长了,会遗留下各种有用或无用的日志,对于有代码洁癖的人来说,无疑是一种灾难. 1.公司日志记录结构: 2.Git日志记录结构: 二 ...
- 【mysql】关于悲观锁
关于mysql中的锁 在并发环境下,有可能会出现脏读(Dirty Read).不可重复读(Unrepeatable Read). 幻读(Phantom Read).更新丢失(Lost update)等 ...
- 为什么我还不推荐内存中OLTP给用户
嗯,有些人在看玩这篇文章后会恨我,但我还是要说.1个月来我在内存中OLTP这个里领域里做了大量的工作,很多用户都请求使用这个惊艳的新技术.遗憾的是,关于内存中OLTP没有一个是真的令人激动的——看完你 ...
- WPF DEV控件-ChartControl用法
WPF常用的第三方控件集,DevExpress 下面介绍如何生成Chart界面: <dxc:ChartControl AnimationMode="OnDataChanged" ...