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 相关文章推荐
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
js精度溢出解决方案
Dec 02 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
js切换光标示例代码
Oct 10 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
vue 图片裁剪上传组件的实现
Nov 12 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实现中文字符截取防乱码方法汇总
2015/04/29 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
在node中如何使用 ES6
2017/04/22 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
python读取word文档的方法
2015/05/09 Python
Python深入06——python的内存管理详解
2016/12/07 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
T3官网:头发造型工具
2019/12/26 全球购物
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
个人找工作的自我评价
2013/10/17 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
春节晚会开场白
2015/05/29 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
Go归并排序算法的实现方法
2022/04/06 Golang