jquery实现"跳到底部"，"回到顶部"效果
<!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>
http://blog.csdn.net/nyb869008813/archive/2011/06/27/6570155.aspx
jquery实现"跳到底部"，"回到顶部"效果的更多相关文章
- jQuery写toTop(回到顶部)效果
在通常的网站开发中,页面有时候会很长,尤其是一些电商网站,为了提高用户的体验效果,我们通常会增加一个回到顶部的按钮,这个按钮我们同城会使用fixed定位,将其定位在当前可视区域某一固定位置.这个效果用 ...
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用Javascript实现回到顶部效果
用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...
- javascript 特效实现(2)——回到顶部效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 页面滚动事件和利用JS实现回到顶部效果
页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
- 自写jquery网页回到顶部效果，渐隐图标，引用js文件就可以
唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...
- jquery点击回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript 回到顶部效果的实现
demo.js window.onload=function() { var timer=null; var obtn=document.getElementById('btn'); var isTo ...
- JS原生回到顶部效果
// 回到顶部 onload = function () { var oBtnTop = document.getElementById('toTop'); var timer = null; oBt ...
随机推荐
- Grunt - 前端开发所见即所得
首先要安装全局的grunt-cli sudo npm install grunt-cli -g 1,项目中初始化npm文件,项目名不要和[关键词]如grunt重复,一直回车即可 npm init 2, ...
- [转自开心软件园]解读“剩余 Windows 重置计数”和“信任时间”
昨天在讲解slmgr.vbs命令的时候,有一个问题没有解决,就是输入"slmgr.vbs -dlv"命令,在显示的信息中,注意到最后两行:"剩余 Windows 重置计数 ...
- Windows编译安装OpenSSL
windows下使用vs2008中的nmake编译安装openssl的脚本build.bat: echo off & color 0A :: 项目名称 set PROJECT=openssl ...
- FZU 2028 BFS+vector
一个普通的bfs 如果不看样例和input的解释... 四个0真是神样例 又被input误导 以为每个点都按顺序有标号 传送门的终点给的是一个点的标号 然后结果是什么呢?无尽的runtime erro ...
- A trip through the Graphics Pipeline 2011_03
At this point, we’ve sent draw calls down from our app all the way through various driver layers and ...
- UIbutton 圆角和边线
#define WhiteColor [UIColor whiteColor]#define YellowColor Color_RGB(253,131,42,1)//主题黄#define Font ...
- 关于Shader的跨平台方案的考虑
Apple 推出 metal后,除了新的metal framewrok外,也多了一种新的shader语言,最近工作也做了一些metal移植的测试,主要还是现有引擎如何可以快速支持metal的解决方 ...
- Failed to connect to remote VM. Connection refused. Connection refused: connect.
eclipse debug启动经常出现这个错误,已经启动了debug进程,X掉重新启动即可.
- 《Java程序设计》第2周学习总结
20145317彭垚<Java程序设计>第2周学习总结 教材学习内容总结 类型 基本类型 整数(short.int.long) 字节(byte) 浮点数(float/double) 字符( ...
- Python操作MySQL以及中文乱码的问题
Python操作MySQL需要安装Python-MySQL可以从网上搜索一下,和一般的Python包一样安装 安装好之后,模块名字叫做MySQLdb ,在Window和Linux环境下都可以使用,试验 ...