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 相关文章推荐
JQuery从头学起第二讲
Jul 04 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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中创建并处理图象
2006/10/09 PHP
建立动态的WML站点(一)
2006/10/09 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
工厂门卫岗位职责
2013/11/25 职场文书
银行实习生的自我评价
2013/12/09 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
煤矿安全协议书
2014/08/20 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
2015年质检工作总结
2015/05/04 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
代码解析React中setState同步和异步问题
2021/06/03 Javascript
Python序列化模块JSON与Pickle
2022/06/05 Python