<!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. Hadoop工程包架构解析

    Hadoop源码解析 1 --- Hadoop工程包架构解析 1 Hadoop中各工程包依赖简述    Google的核心竞争技术是它的计算平台.Google的大牛们用了下面5篇文章,介绍了它们的计算 ...

  2. /etc/named/named.conf.options中的Options参数

    listen-on port 53 { any; }; 监听在这部主机系统上面的哪个网路介面.预设是监听在localhost,亦即只有本机可以对DNS 服务进行查询,那当然是很不合理啊!所以这里要将大 ...

  3. 【iCore3 双核心板】例程二十八：FSMC实验——读写FPGA

    实验指导书及代码包下载: http://pan.baidu.com/s/1gerjjxh iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  4. PHP 错误与异常 笔记与总结（14 ）记录和发送异常信息

    当发生异常时,把异常信息记录到日志文件中: <?php header('content-type:text/html; charset=utf-8'); class LogException e ...

  5. UItableview里面的header、footer

    #import "ViewController.h" #import "MJRefresh.h" @interface ViewController () { ...

  6. Failed to connect to remote VM. Connection refused. Connection refused: connect.

    eclipse debug启动经常出现这个错误,已经启动了debug进程,X掉重新启动即可.

  7. java--字符串替换replace，replaceAll，replaceFirst

    1.字符串替换,replace string s="abcdfersabcdsgacabc"; 将字符串中的abc替换成bdf s.replace("abc", ...

  8. MySQL出现大量unauthenticated user的问题

    发现这算属MySQL的一个bug，不管连接是通过hosts还是ip的方式，MySQL都会对DNS做反查，IP到DNS，由于反查的接续速度过 慢（不管是不是isp提供的dns服务器的问题或者其他原因）， ...

  9. mysql备份恢复

    备份命令: mysqldump -u root -p --opt 数据库名 > /data/数据库文件名.sql 恢复命令: mysql -u root -p 数据库名</data/恢复的 ...

  10. laravel md5+salt 密码

    laravel 默认用的登录密码加密方式是: $password = Hash::make('password'); 修改密码加密方式为: $password = md5('password'.'sa ...