jQuery 滚动动画简单版
动画的思路很简单，点击页面上一个元素，页面滚动到指定位置。下面介绍一下我3个小时百度的研究成果：
首先是html部分：
<html>
<body>
<a>顶部</a>
<a>中部</a>
...<p>持续添加直到出现滚动条</p>...
</body>
</html>
先添加两个<a>元素作为按钮。然后对<a>元素进行补充：
<html>
<body>
<a href="javascript:;" id="tab1">顶部</a>
<a href="javascript:;" id="tab2">中部</a>
...<p>持续添加直到出现滚动条</p>...
</body>
</html>
href="javascript:;"大概意思是说a元素可以激活js代码。如果不加则代码无效。使用<button>则无需添加。
接着引入jquery和写入代码：
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("#tab1").click(function(){
$("html,body").animate({scrollTop:'0px'},300);
});
$("#tab2").click(function(){
$("html,body").animate({scrollTop:'600px'},300);
});
});
</script>
需要注意:
1、写入的代码最好在引入的jquery语句下方
2、id一定要和<a>元素对应
3、"html,body"代表整体移动
4、({scrollTop:'600px'},300);前面的数值是移动距离，后面的数值是动画时间（单位是毫秒）
做到这一步代码就能运行了。
下面详细的解析一下jquery代码：
$(document).ready(function(){
//这一句都要加，不加会出错，没有实际作用
$("#tab1").click(function(){
//$("#tab1")是选择器，click()是方法。意思是说对#tab1使用click方法
$("html,body").animate({scrollTop:'0px'},300);
//我理解的scrollTop是个变量属性，代表元素最顶端和当前浏览器显示区域上边沿之间的距离，所以这句话的意思是：让body的上边沿和浏览器可视区域上边沿距离为0px，结果就是回到页面顶端。
});
...
});
jQuery 滚动动画简单版的更多相关文章
- jquery列队动画简单演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jquery实现图片瀑布流思路-简单版
目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特 ...
- HTML5/jQuery雷达动画图表 图表配置十分简单
1.HTML5/jQuery雷达动画图表 图表配置十分简单 之前我们介绍过不少形形色色的HTML5图表了,像这款HTML5折线图表Aristochart是一款很不错的折线图表,这款HTML5 Canv ...
- 推荐几款制作网页滚动动画的 JavaScript 库
这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...
- ScrollMe – 在网页中加入各种滚动动画效果
ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果.当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素.它易于设置,不需要任何自定义的 JavaScri ...
- jQuery Easing动画效果扩展（转）
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jQuery Easing 动画效果扩展
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
- jquery animate 动画效果使用解析
animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...
随机推荐
- css3随笔
1 rgba和opacity的区别 RGBA即红色R+绿色G+蓝色B+通道Alpha 语法: R:红色值.正整数 | 百分数 G:绿色值.正整数 | 百分数 B:蓝色值.正整数| 百分数 A:透明度. ...
- ADODB.Connection 错误 '800a0e7a' 未找到提供程序 该程序可能未正确安装
今天调程序的时候发现的,错误提示如下: ADODB.Connection 错误 '800a0e7a' 未找到提供程序.该程序可能未正确安装. /conn.asp,行 6 因为系统是64位的win7或w ...
- NASA关于如何写出安全代码的10条军规
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:NASA关于如何写出安全代码的10条军规.
- Runtime 函数 Swizzling 改变OC方法的调度顺序
首先加入一个小知识: SEL.Method.IMP的含义及区别 在运行时,类(Class)维护了一个消息分发列表来解决消息的正确发送.每一个消息列表的入口是一个方法(Method),这个方法映射了一对 ...
- 使用freemarker生成html
http://herryhaixiao.iteye.com/blog/677524 由于freemarker这个技术很久很久就有了,注释我就没写得很详细了,相信大家都看得懂.下面就直接上代码以及一些代 ...
- js 数组详解(javascript array)
Array Array 对象用于在单个的变量中存储多个值. 构造函数: 1) new Array(); 2) new Array(size); 3) new Array(element0, ...
- Amazon EC2上搭建VPN服务器
Amazon EC2 提供了一年免费试用,Micro Instance,配置是 1G 内存,共享 CPU,和每月 15G 的流量.搭一个 VPN 服务器绰绰有余了.操作系统我选的是 Amazon Li ...
- 通用的 makefile 小工具分享 - Easymake 使用说明
Easymake 使用说明 介绍 Easymake 是一个在linux系统中 C/C++ 开发的通用 makefile.在一个简单的 C/C++ 程序中使用 easymake,你甚至可以不写一行 ma ...
- WinForm界面（一）
一:Form对象 属性: 设计中的Name:窗体类的类名AcceptButton:窗口的确定按钮CancelButton:窗口按ESC的取消按钮 1.外观 Backcolor:背景颜色Forecolo ...
- nyoj 33 蛇形填数
蛇形填数 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 在n*n方陈里填入1,2,...,n*n,要求填成蛇形.例如n=4时方陈为: 10 11 ...