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 ...
随机推荐
- nginx + lua 构建网站防护waf（一）
最近在帮朋友维护一个站点.这个站点是一个Php网站.坑爹的是用IIS做代理.出了无数问题之后忍无可忍,于是要我帮他切换到nginx上面,前期被不断的扫描和CC.最后找到了waf这样一个解决方案缓解一下 ...
- JavaScript【5】高级特性（作用域、闭包、对象）
笔记来自<Node.js开发指南>BYVoid编著 1.作用域 if (true) { var somevar = 'value'; } console.log(somevar); Jav ...
- 六款值得推荐的android（安卓）开源框架简介【转】
http://my.oschina.net/u/1244156/blog/380647 1.volley 项目地址 https://github.com/smanikandan14/Volley-de ...
- Eclipse启动时报需要安装"Java SE 6 Runtime"致无法启动解决方案
今天心血来潮,把MBP升级到了osx mavericks,然后启动了闲置好久的eclipse,启动时居然报错了: 若要打开Eclipse.app,您需要Java SE 6 runtime,您想现在安装 ...
- mongo数据管理java简易版
mongo是搭建在局域网服务器上的,处理起来比较麻烦,于是自己写了个简单的处理工具. 如果有对java操作mongo不太了解的也可以在这里看下简单的示例. 只有增删改查的功能,而且只支持json格式的 ...
- Android Studio快捷键指南（本文持续更新）
这是我在使用Android Studio过程中接触到的一些快捷键,和大家分享,后面会继续完善此文,也欢迎大家踊跃补充,一起完善. 快捷键 删除并剪贴行:Ctrl+X 复制一行:Ctrl+D 代码格式整 ...
- iOS多线程开发--NSThread NSOperation GCD
多线程 当用户播放音频.下载资源.进行图像处理时往往希望做这些事情的时候其他操作不会被中 断或者希望这些操作过程中更加顺畅.在单线程中一个线程只能做一件事情,一件事情处理不完另一件事就不能开始,这样势 ...
- html5标签兼容ie6，7，8
注册博客园已经三年了,这三年一直在忙,没时间写博文.也许是忙,也许是懒吧!当然这三年发生了很多事,我也从开发人员转变为前端人员. 是时候对所学的,所用的知识做一下沉淀了.就从这一篇开始吧! html5 ...
- 移动端 touch 实现 拖动元素
var homeMove = (function () { //touch自适应 var k = "ontouchend" in window ? "touchend&q ...
- sublime text 3快捷键设置
sublime text 3 v-3103默认快捷键设置 [ { "keys": ["ctrl+shift+n"], "command": ...