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 相关文章推荐
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
javascript 循环读取JSON数据的代码
Jul 17 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
vue实现拖拽效果
Dec 23 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
php操作excel文件 基于phpexcel
2010/07/02 PHP
php中hashtable实现示例分享
2014/02/13 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
python数据结构之图的实现方法
2015/07/08 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
python使用递归的方式建立二叉树
2019/07/03 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
就业自荐信
2013/12/04 职场文书
大学本科毕业生求职信范文
2013/12/18 职场文书
小松树教学反思
2014/02/11 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
2016年五一促销广告语
2016/01/28 职场文书