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 ...
随机推荐
- A Tour of Go Numeric Constants
Numeric constants are high-precision values. An untyped constant takes the type needed by its contex ...
- Android：从程序员到架构师之路Ⅰ
一般而言,人们大多先学开发(代码)的技术,随后才学(架构)设计的方法.然而,在实际做事时,却是先设计,随后才写出代码来.敏捷过程则让设计与写码迭代循环下去,一直到完成为止.在本课程里,就遵循敏捷的迭代 ...
- Robotium学习笔记二
一. 控制测试用例的执行顺序 采用TestSuit方式来控制每条Case的运行顺序 Demo如下 public static Test suite() { TestSuite suite = new ...
- Spring源码入门——XmlBeanDefinitionReader解析
接上篇[] ,我们看到BeanDefinitionReader解决的是从资源文件(xml,propert)到BeanDefinition集合的过程.所以BeanDefinitionReader接口有两 ...
- TOR的使用
使用步骤: 1.配置,该计算机是否需要通过代理访问互联网?选否 2.该计算机的防火墙是否仅允许特定端口的互联网连接?选否 3.互联网服务提供商(ISP)是否对Tor网络连接进行了封锁或审查?选是 4. ...
- jQuery的DOM操作小案例
案例一:下拉列表左右选择 <body> <div> <select style="width:60px" multiple size="10 ...
- 在HTTP响应标题中隐藏ASP.NET MVC的版本
在默认情况下,ASP.NET MVC网站会在HTTP响应标题(Response Header)中动态添加目前使用的ASP.NET MVC版本编号.如果使用Fiddler Web Debugger工具查 ...
- html传參中？和&
<a href="MealServlet?type=findbyid&mid=<%=m1.getMealId()%> 在这句传參中?之后的代表要传递的參数当中有两个 ...
- android照片墙的实现
转载自 http://blog.csdn.net/guolin_blog/article/details/9526203 由于每个android应用程序都有内存限制,所以如果加载很多图片的话,一定会出 ...
- CSharp Algorithm - How to traverse binary tree by breadth (Part II)
/* Author: Jiangong SUN */ Here I will introduce the breadth first traversal of binary tree. The pri ...