<!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实现"跳到底部"，"回到顶部"效果的更多相关文章

  1. jQuery写toTop(回到顶部)效果

    在通常的网站开发中,页面有时候会很长,尤其是一些电商网站,为了提高用户的体验效果,我们通常会增加一个回到顶部的按钮,这个按钮我们同城会使用fixed定位,将其定位在当前可视区域某一固定位置.这个效果用 ...

  2. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 用Javascript实现回到顶部效果

    用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...

  4. javascript 特效实现(2)——回到顶部效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 页面滚动事件和利用JS实现回到顶部效果

    页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

  6. 自写jquery网页回到顶部效果，渐隐图标，引用js文件就可以

    唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...

  7. jquery点击回到顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. javascript 回到顶部效果的实现

    demo.js window.onload=function() { var timer=null; var obtn=document.getElementById('btn'); var isTo ...

  9. JS原生回到顶部效果

    // 回到顶部 onload = function () { var oBtnTop = document.getElementById('toTop'); var timer = null; oBt ...

随机推荐

  1. centos最小安装，之后想安装x-windows，安装图形界面 startx

    yum groupinstall "Desktop"yum groupinstall "X Window System"安装完成之后,reboot一下,不然硬件 ...

  2. setInterval 启用和停止，见代码

    <title></title>    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="t ...

  3. [ZZ] RGBM and RGBE encoding for HDR

    Deferred lighting separate lighting rendering and make lighting a completely image-space technique. ...

  4. Find命令搜索过去一段时间内修改过的文件

    Find命令搜索过去一段时间内修改过的文件 服务器  kxjhwbb  12个月前 (10-22)  342℃  0评论 有些时候我们需要查找一些最近修改过的文件,比如改着改着忘了自己改过什么= = ...

  5. javascrpt 继承

    一.基于原型链方式实现的继承 缺点:无法从子类中调用父类的构造函数,所以没有办法把子类的属性赋值到父类中. 如果父类中有引用类型,例如:数组.此时这个引用类型会添加到子类的原型当中,一但子类某个对象修 ...

  6. Delphi 缩放图像代码 - 支持PNG透明通道

    要求Delphi2007或者更高版本, 系统要求至少XP-SP2以上 实际上是利用了Windows的windowscodecs.dll这个文件的功能 在VCL里已经封装为TWICImage类 proc ...

  7. readonly=“readonly”与readonly=“true”

    <input id="u" readonly /> <input id="u" readonly="readonly" / ...

  8. angularJS自定义指令间的“沟通”

    由此例子我们可以看出,angularJS使用指令时link的执行顺序<html> <head> <meta charset="utf-8"/> ...

  9. java简单优化和编写规范，自己总结的。

    1.永远不要比较两个浮点数是否相等.它是不安全的.详情google. 2.尽量使用StringBuffer代替String. 3.final类会提高很多效率. 4.try-catch 不应该用来控制程 ...

  10. sql server2008企业版和标准版

    SQL Server 的企业版和标准版的License价格差5倍之多,在企业应用中,DBA 经常会被这个问题问住,本帖将日常工作实践中遇到到版本问题给出第一手资料,陆续补充…… SQL 2008 镜像 ...