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 Arrays
The type [n]T is an array of n values of type T. The expression var a [10]int declares a variable a ...
- Selenium 进行web自动化测试
1.安装火狐版本时注意,如果无法正常安装,应该点击右键---以管理员身份运行 2.安装成功后,选择工具--选项--高级--更新,停止其自动化更新 3.maven里面加载应有的selenium的组件
- 结构体数组(C++)
1.定义结构体数组 和定义结构体变量类似,定义结构体数组时只需声明其为数组即可.如: struct Student{ int num; char name[20]; char sex[5]; int ...
- linux 系统磁盘分区之fdisk
对于学习磁盘分区,通常学习的都是fdisk命令 当然,对于小于2TB的磁盘,我们基本上是使用fdisk命令进行分区 下面就简单介绍一下fdisk操作磁盘的基本命令和场景模拟 常用命令介绍 fdis ...
- contentProvider模板
package com.example.qunzheng.todolist.provider; import android.content.ContentProvider; import andro ...
- [Canvas] Introduction to drawing with p5js
In this lesson we look at using color and the basic drawing methods of p5js, and how they can be com ...
- hi3531的h264压缩中改动波特率
typedef struct hiVENC_ATTR_H264_CBR_S { HI_U32 u32Gop; HI_U32 u32StatTime; HI_U32 u32ViFrmRate; HI_F ...
- mysql 5.6 oom 图
- Android 自学之表格布局 TableLayout
表格布局(TableLayout),表格布局采用行.列的形式来管理UI组件,TableLayout并不需要明确的声明多少行,多少列,而是通过TableRow.其他组件来控制表格的行数和列数. 每次想T ...
- addEventListener 用法
addEventListener 用于注册事件处理程序,IE 中为 attachEvent,我们为什么讲 addEventListener 而不讲 attachEvent 呢?一来 attachEve ...