<!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. Java实战equals()与hashCode()

    一.equals()方法详解 equals()方法在object类中定义如下: 代码 public boolean equals(Object obj) { return (this == obj); ...

  2. ci调用application/views下的css，js，图片资源出现You don't have permission to access CodeIgniter on this server解决

    原因是view文件下面有个.htaccess文件,里面写的是 Deny from all     //拒绝所有请求 自己本地测试的话,就直接去掉,放到服务器就指定application/views文件 ...

  3. springMvc文件下载

    //主要看导入的是那些类 import com.ibm.db.service.ITopicService;import org.apache.commons.io.FileUtils;import o ...

  4. 【SIGGRAPH 2015】【巫师3 狂猎 The Witcher 3: Wild Hunt 】顶级的开放世界游戏的实现技术。

    [SIGGRAPH 2015][巫师3 狂猎 The Witcher 3: Wild Hunt ]顶级的开放世界游戏的实现技术 作者:西川善司 日文链接  http://www.4gamer.net/ ...

  5. 优秀而又实用的PHP工具集锦

    优秀而又实用的PHP工具集锦   浏览:1141 发布日期:2013/09/04 分类:技术分享 PHP是目前实用最为广泛的服务器端开源脚本语言之一,很多优秀的开源程序都是基于PHP构建的,比如大名鼎 ...

  6. Java中测试对象的等价性

    Java中用于测试对象的等价性有三个操作符:== , != 和 Equals() 对于基本类型即int,boolean, byte 等等来说,==和 != 比较的是 基本类型的内容,这和c.c++是一 ...

  7. comms.nottingham.ac.uk/learningtechnology

    http://comms.nottingham.ac.uk/learningtechnology/

  8. NSArry的常见方法

    使用数组对象创建的数组功能非常强大,在Java语言或者C语言中定义的数组必须满足数组中的每一个元素必须是同样的类型.而Objective-C语言可以在Array数组中放任意类型的数据,值得注意的是只能 ...

  9. netstat 查看TCP状态值

    一.TCP 状态值 netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' CLOSED:无连接是活动的或正在进行LI ...

  10. AQS 与 LockSupport

    1.结构 Lock的实现类其实都是构建在AbstractQueuedSynchronizer上,每个Lock实现类都持有自己内部类Sync的实例 二.二元信号量 A semaphore initial ...