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 相关文章推荐
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
基于jquery的表格排序
Sep 11 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
前端深入理解Typescript泛型概念
Mar 09 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 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简单系统查询模块代码打包下载
2008/06/07 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
用javascript操作xml
2006/11/04 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
jQuery实现跨域
2015/02/03 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
深入了解Python中pop和remove的使用方法
2018/01/09 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
python 实现超级玛丽游戏
2020/11/25 Python
python 实现图片裁剪小工具
2021/02/02 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
HTML5学习笔记之History API
2015/02/26 HTML / CSS
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis