jquery实现跳到底部,回到顶部效果的简单实例(类似锚)


Posted in Javascript onJuly 10, 2016

实例如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现跳到底部,回到顶部效果的简单实例(类似锚)</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
 jQuery(function(){
  $('#top').click(function(){$('html,body').animate({scrollTop: '0px'}, 1000);return false;});
  $('#foot').click(function(){$('html,body').animate({scrollTop: $('#footer').offset().top},1000);return false;});
 })
</script>
</head>
<body>
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<a href="#" id="foot">跳到底部</a>
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<a href="#" id="top"> 返 回 顶 部 </a>
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<a name="footer" id="footer"></a>
</body>
</html>

以上这篇jquery实现跳到底部,回到顶部效果的简单实例(类似锚)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
JS轮播图的实现方法
Aug 24 Javascript
JS实现点击事件统计的简单实例
Jul 10 #Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 #Javascript
js生成随机数(指定范围)的实例代码
Jul 10 #Javascript
JS获取随机数和时间转换的简单实例
Jul 10 #Javascript
JS生成不重复的随机数组的简单实例
Jul 10 #Javascript
浅谈JavaScript对象与继承
Jul 10 #Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 #Javascript
You might like
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
Javascript事件实例详解
2013/11/06 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
js动态引入的四种方法
2018/05/05 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
Python @property原理解析和用法实例
2020/02/11 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
Python 存取npy格式数据实例
2020/07/01 Python
基于PyTorch中view的用法说明
2021/03/03 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
自荐信的两点禁忌
2013/10/30 职场文书
市场营销毕业求职信
2014/08/07 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
个人学习总结范文
2015/02/15 职场文书
小学庆六一主持词
2015/06/30 职场文书
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技