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 相关文章推荐
js实时监听文本框状态的方法
Apr 26 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
基于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
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
jQuery中find()方法用法实例
2015/01/07 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
zookeeper python接口实例详解
2018/01/18 Python
Django自定义用户认证示例详解
2018/03/14 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
幼儿园教师培训制度
2014/01/16 职场文书
财务主管自我鉴定
2014/01/17 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
制作部班长职位说明书
2014/02/26 职场文书
成绩单公证书
2014/04/10 职场文书
孔庙导游词
2015/02/04 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
MySQL窗口函数的具体使用
2021/11/17 MySQL
java实现面板之间切换功能
2022/06/10 Java/Android