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的25个步骤 千倍级效率提升
Feb 11 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
js实现tab切换效果实例
Sep 16 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
js实现自动播放匀速轮播图
Feb 06 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
深入浅析用PHP实现MVC
2016/03/02 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
详解Python自建logging模块
2018/01/29 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
python 自动批量打开网页的示例
2019/02/21 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
Python Subprocess模块原理及实例
2019/08/26 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
文史专业毕业生自荐信
2013/11/17 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
小组合作学习反思
2014/02/18 职场文书
大学生创业项目方案
2014/03/08 职场文书
个人四风对照检查材料
2014/09/26 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
2015年质检工作总结
2015/05/04 职场文书
离职证明范本
2015/06/12 职场文书