用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 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
Javascript实现基本运算器
Jul 15 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 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 魔术方法使用说明
2009/10/20 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
php之CodeIgniter学习笔记
2013/06/17 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
JS打印组合功能
2016/08/04 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
微观物理专业自荐信
2014/01/26 职场文书
食品安全工作实施方案
2014/03/26 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
小学生节水倡议书
2015/04/29 职场文书
初中班主任教育随笔
2015/08/15 职场文书
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
python manim实现排序算法动画示例
2022/08/14 Python