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 相关文章推荐
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
php 数组二分法查找函数代码
2010/02/16 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
python实现文件的分割与合并
2019/08/29 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
python求解汉诺塔游戏
2020/07/09 Python
python 批量将中文名转换为拼音
2021/02/07 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
Delphi笔试题
2016/11/14 面试题
拾金不昧的表扬信
2014/01/16 职场文书
学生会主席事迹材料
2014/01/28 职场文书
就业协议书范本
2014/04/11 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers