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 ...
随机推荐
- 巧用TAG属性保存对象的指针
指针的数据类型是整型,一个指针就是一个整型的数值. 所以凡整型的变量(这个整型的变量可以是声明在INI文件中,也可以是声明在函数中的)也好,对象的整型的属性也好,都可以用来存储一个指针. 但对象往往没 ...
- GridControl 选择列、复选框全选（上）
说明: GirdControl 中添加一列,这一列不是写在数据库中的,而是代码中添加的. 图示: 底层类代码: #region GridControl 全选 /// <summary> / ...
- 准备开一个地图SDK的开源项目
最近有点空闲时间了, 准备开一个地图SDK的开源项目, 现在的地图SDK已经有很多了, 再做一个跟重新发明个轮子差不多, 但还想做的原因是想在别的轮子的基础上造个轮子... 初步设想是基于开源的地图渲 ...
- ip头、tcp头、udp头详解及定义，结合Wireshark抓包看实际情况
公司的同事们在分析网页加载慢的问题,忽然使用到了Wireshark工具,我就像发现新大陆一样好奇,赶紧看了看,顺便复习了一下相关协议.上学时学的忘的差不多了,汗颜啊! 报文封装整体结构 mac帧头定义 ...
- JavaScript MVC框架PK：Angular、Backbone、CanJS与Ember
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- 【玩转微信公众平台之六】 搭建新浪SAEserver
赶紧接上一篇继续讲. ------本篇将介绍怎样搭建 新浪SAEserver.猛戳 http://sae.sina.com.cn/1.先自己注冊一个账号,假设有新浪的账号,微博之类的都能够直接拿来用, ...
- Cocos2d-x实现粒子效果的三种方式
在Cocos2d-x中,实现粒子效果可以有三种方法. Normal 0 10 pt 0 2 false false false EN-US ZH-CN X-NONE $([{£¥·'"〈&l ...
- 如何从零开始学习DIV+CSS
CSS是样式,DIV是层.DIV+CSS是网站标准(web标准),通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别.因为XHTML网站设计标准中,不再使用表格定位技术,而是采用D ...
- Android 自定义View修炼-仿QQ5.0 的侧滑菜单效果的实现
有一段时间没有写博客了,最近比较忙,没什么时间写,刚好今天有点时间, 我就分享下,侧滑菜单的实现原理,一般android侧滑的实现原理和步骤如下:(源码下载在下面最后给出哈) 1.使用ViewGrou ...
- iOS之layout方法-layoutSubviews、layoutIfNeeded、setNeedsLayout
下面列举下iOS layout的相关方法: layoutSubviews layoutIfNeeded setNeedsLayout setNeedsDisplay drawRect sizeThat ...