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 相关文章推荐
javascript replace方法与正则表达式
Feb 19 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 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数组及条件,循环语句学习
2012/11/11 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
斜45度寻路实现函数
2009/08/20 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
JS常用函数使用指南
2014/11/23 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
微信小程序实现下载进度条的方法
2017/12/08 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
Python random模块常用方法
2014/11/03 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
Python函数生成器原理及使用详解
2020/03/12 Python
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
信访工作者先进事迹
2014/01/17 职场文书
法院授权委托书范文
2014/08/02 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
担保书格式范文
2015/09/22 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
浅谈MySQL中的六种日志
2022/03/23 MySQL