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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
javascript 写类方式之七
Jul 05 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 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
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
Vue SPA 首屏优化方案
2021/02/26 Vue.js
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python 追踪except信息方式
2020/04/25 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
Europcar意大利:汽车租赁
2019/07/07 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
学生会副主席竞聘书
2014/03/31 职场文书
政工师工作总结2015
2015/05/26 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
Go 语言中 20 个占位符的整理
2021/10/16 Golang
oracle数据库去除重复数据
2022/05/20 Oracle
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android