jquery 跳到顶部和底部动画2句代码简单实现


Posted in Javascript onJuly 18, 2013
<!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读取中文COOKIE的解决办法
Feb 15 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 #Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 #Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 #Javascript
GRID拖拽行的实例代码
Jul 18 #Javascript
去掉gridPanel表头全选框的小例子
Jul 18 #Javascript
gridpanel动态加载数据的实例代码
Jul 18 #Javascript
javaScript NameSpace 简单说明介绍
Jul 18 #Javascript
You might like
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP钩子实现方法解析
2019/05/21 PHP
用户注册常用javascript代码
2009/08/29 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
校园新闻广播稿
2014/01/10 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
新郎新娘婚礼答谢词
2014/01/11 职场文书
安全标准化实施方案
2014/02/20 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
租房协议书范本
2014/04/09 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
公司董事任命书
2015/09/21 职场文书
Vue如何清空对象
2022/03/03 Vue.js
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers