用jquery实现动画跳到顶部和底部(这个比较简单)


Posted in Javascript onSeptember 01, 2014

当点击顶部按钮的时候,执行方法,scrollTop属性获取选中标签距滚动条的距离,当点击底部标签时候,执行方法,其中offset()获取匹配元素在当前视口的相对偏移

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src=jquery-1.8.0.js></script>
<script>
$(document).ready(function () {
//当点击顶部按钮的时候,执行方法,scrollTop属性获取选中标签距滚动条的距离。
$('#top').click(function () {
$('html').animate(
{ scrollTop: '0px' }, 1000
);
});
//当点击底部标签时候,执行方法,其中offset()获取匹配元素在当前视口的相对偏移,返回的是一个对象,有两个属性top,left
//animate,的第二个属性当然我们也可以设置'slow','normal'或'fast'
$('#foot').click(function () {
$('html').animate(
{scrollTop:$('span').offset().top},1000
);
});
});
</script>
</head>
<body>
<br /> <br /> <br /> <br /> <br />
<a href="#" id="foot">底部</a>
<br /> <br /> <br /> <br /> <br />
<br /> <br /> <br /> <br /> <br />

<a href="#" id="top">顶部</a>
<br /> <br /> <br /> <br /> <br />
<span></span>
</body>
</html>
Javascript 相关文章推荐
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
Javascript地址引用代码实例解析
Feb 25 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 #Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 #Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 #Javascript
原生javascript实现拖动元素示例代码
Sep 01 #Javascript
使用text方法获取Html元素文本信息示例
Sep 01 #Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 #Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 #Javascript
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
Javascript实现的分页函数
2007/02/07 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
jquery编写日期选择器
2017/03/16 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
Python3中的真除和Floor除法用法分析
2016/03/16 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
Python中的延迟绑定原理详解
2019/10/11 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
python request 模块详细介绍
2020/11/10 Python
大码女装:Ulla Popken
2019/08/06 全球购物
精选干货:Java精选笔试题附答案
2014/01/18 面试题
车工岗位职责
2013/11/26 职场文书
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
九年级体育教学反思
2014/01/23 职场文书
高中体育教学反思
2014/01/29 职场文书
厂区绿化方案
2014/05/08 职场文书
建设投标担保书
2014/05/13 职场文书
党的作风建设心得体会
2014/10/22 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
Django如何与Ajax交互
2021/04/29 Python
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL