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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
jquery 滚动条事件简单实例
Jul 12 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
JS实现放烟花效果
Mar 10 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操作redis缓存方法分享
2015/06/03 PHP
基于jQuery的倒计时插件代码
2011/05/07 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
js中document.write的那点事
2014/12/12 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
如何清空python的变量
2020/07/05 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
美国轮胎网站:Priority Tire
2018/11/28 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
网站客服岗位职责
2014/04/05 职场文书
物理教育专业求职信
2014/06/25 职场文书
春节超市活动方案
2014/08/14 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
入股协议书范本
2014/11/01 职场文书
安全承诺书
2015/01/19 职场文书
休假证明书
2015/06/24 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle