最简单的用jquery实现动画的跳到顶部和底部
来源:互联网 发布:巨杉数据库公司怎么样 编辑:程序博客网 时间:2024/05/22 06:58
<!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>
0 0
- 最简单的用jquery实现动画的跳到顶部和底部
- 最简单的用jquery实现动画的跳到顶部和底部
- JQuery点击按钮跳到当前页面指定的div和跳到顶部或底部
- jquery实现"跳到底部","回到顶部"效果(类似锚)
- jquery实现"跳到底部","回到顶部"效果
- jquery实现"跳到底部","回到顶部"效果
- ScrollView滑动到顶部和底部蓝色动画特效的取消
- 监听ScrollView滑动到最顶部和最顶部的完美实现
- 利用JQuery实现从底部回到顶部的功能
- 利用JQuery实现从底部回到顶部的功能
- 当滑动到顶部和底部时,实现Item的分离效果的ListView
- 简单实现顶部和底部工具栏
- 滑动到底部或顶部响应的ScrollView实现
- 快速上下移动到网页的顶部和底部
- ScrollView滚动到底部和顶部的检测
- [Android] ScrollView滚动到底部和顶部的检测
- ListView已到底部和顶部的判断
- ListView已到底部和顶部的判断
- poj 3352
- 手把手教你创建第一个IOS应用
- Hibernate4之session核心方法
- Spring AOP原理
- VBS基础篇 - 对象(1) - Class对象
- 最简单的用jquery实现动画的跳到顶部和底部
- 归并排序
- extern static 在c中的使用方法
- 自定义View自定义属性
- boot.scr生成
- 常用正则表达式
- vs2008 vs2010 添加跳转到函数开头的快捷键
- PX4 cdc bootloader应用
- MYSQL数据库命名及设计规范