jQuery实现简单滚动动画效果


Posted in Javascript onApril 07, 2016

动画的思路很简单,点击页面上一个元素,页面滚动到指定位置。下面介绍一下我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>

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,结果就是回到页面顶端。


    });
    ...
  });

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 页面只自动刷新一次
Jul 10 Javascript
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
根据出生日期自动取得星座的js代码
Jul 20 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 #Javascript
原生js制作日历控件实例分享
Apr 06 #Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 #Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 #Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 #Javascript
jQuery隐藏和显示效果实现
Apr 06 #Javascript
JS动态改变浏览器标题的方法
Apr 06 #Javascript
You might like
PHP 数字左侧自动补0
2008/03/31 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
Js sort排序使用方法
2011/10/17 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
Python中类型关系和继承关系实例详解
2015/05/25 Python
python 爬取微信文章
2016/01/30 Python
Fabric 应用案例
2016/08/28 Python
Django中信号signals的简单使用方法
2019/07/04 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
Python笔记之facade模式
2019/11/20 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
生态学毕业生自荐信
2013/10/27 职场文书
清华大学自主招生自荐信
2014/01/29 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
SQL Server表分区删除详情
2021/10/16 SQL Server
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android