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 相关文章推荐
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
微信小程序 自定义消息提示框
Aug 06 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 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
通过文字传递创建的图形按钮
2006/10/09 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
js正文内容高亮效果的实现方法
2013/06/30 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
python cookielib 登录人人网的实现代码
2012/12/19 Python
Python队列的定义与使用方法示例
2017/06/24 Python
Python读取word文本操作详解
2018/01/22 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
Django框架模板用法入门教程
2019/11/04 Python
Python如何读取文件中图片格式
2020/01/13 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
python高级特性简介
2020/08/13 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
自我鉴定的范文
2013/10/03 职场文书
找工作最新求职信
2013/12/22 职场文书
转党组织关系介绍信
2014/01/08 职场文书
小学生学习感言
2014/03/10 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技