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 相关文章推荐
用javascript实现在小方框中浏览大图的代码
Aug 14 Javascript
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
javascript动态加载三
Aug 22 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
PHP引用返回用法示例
2016/05/28 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
IE和Firefox下event事件杂谈
2009/12/18 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
python学习手册中的python多态示例代码
2014/01/21 Python
Python抓取百度查询结果的方法
2015/07/08 Python
Django的session中对于用户验证的支持
2015/07/23 Python
python实现识别相似图片小结
2016/02/22 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
python使用matplotlib画饼状图
2018/09/25 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
python实现低通滤波器代码
2020/02/26 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
学校学习雷锋活动总结
2014/07/03 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
Python字符串格式化方式
2022/04/07 Python