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 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
js实现简易聊天对话框
Aug 17 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
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新手上路(七)
2006/10/09 PHP
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
javascript操作css属性
2013/12/30 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
理解javascript对象继承
2016/04/17 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
python 网络编程详解及简单实例
2017/04/25 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
AJax面试题
2014/11/25 面试题
施工安全协议书
2013/12/11 职场文书
学术会议主持词
2014/03/17 职场文书
中学生励志演讲稿
2014/04/26 职场文书
社会工作专业求职信
2014/07/15 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
董事长致辞
2015/07/29 职场文书
Python基本知识点总结
2022/04/07 Python