<!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. android之Chronometer

    首先定义activity_main.xml文件 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/re ...

  2. [转]Entity Framework走马观花之把握全局

    本文转自:http://blog.csdn.net/bitfan/article/details/12887007 Entity Framework走马观花 之 把握全局 ============== ...

  3. OpenCV学习笔记——视频的边缘检测

    使用Canny算子进行边缘检测,并分开输出到三个窗口中,再给每一个窗口添加文字 代码: #include"cv.h" #include"highgui.h" / ...

  4. Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.5:compile

    mvn clean mvn install mvn clean -Dmaven.test.skip=true install 出现上述问题,找不到很多类的一些方法. 解决方法: 1.Window -- ...

  5. [IT新应用]农民朋友的电子商务

    今天通过http://olympiawa.gov/visitors.aspx olympia市的官网,到 http://www.olympiafarmersmarket.com/vendors-1/到 ...

  6. flowvisor test(1)

    参考: Flowvisor 入门 杨帅老师:mininet+FlowVisor+ODL环境搭建及实验1 安装: 参考: 1.Flowvisor安装 2.Mininet安装 3.官网,Floodligh ...

  7. spring对dao层的支持（datasource的作用）

    本文大多数内容转自“http://www.cnblogs.com/liunanjava/p/4412408.html”感谢原作者 在做一个项目时,持久层并没有使用spring jpa和hibernat ...

  8. UIButton 长按点击 背景改变效果

    1.添加按钮的点击事件和按下事件 [btn setImage:[UIImage imageNamed:@"NorMal.png"] forState:UIControlStateN ...

  9. 用 BigDump 工具导入超大 MySQL 数据库备份文件

    用 BigDump 工具导入超大 MySQL 数据库备份文件  创建于 2010-07-01, 周四 00:00  作者 白建鹏 在<Joomla! 1.5 网站防黑9条戒律>这篇文章中, ...

  10. 20145235 《Java程序设计》第6周学习总结

    教材学习内容总结 10.1 InputStream与OutputStream 串流设计的概念 Java将输入/输出抽象化为串流,数据有来源及目的地,衔接两者的是串流对象. 从应用程序角度来看,如果要将 ...