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 ...
随机推荐
- Servlet 编程 简单流程处理（重定向）
流程(来自jiekexueyuan) servlet sucess.jsp error.asp同理 运行结果:
- JSP编程-步步为营
[第一个JSP举例] header.jsp <%@ page language="java" contentType="text/html; charset=utf ...
- java的Arrays工具类实战
java.util.Arrays类能方便地操作数组,它提供的所有方法都是静态的.静态方法是属于类的,不是属于类的对象.所以可以直接使用类名加方法名进行调用.Arrays作为一个工具类,能很好的操作数组 ...
- ZOJ 2975 思维
题意 给出一个矩形 问在其中存在多少子矩形 其四个角上的字母是一样的 一开始暴力写了一发 先枚举行数 再枚举两个列数 再向下枚举行数 判断能否 没有意外的超时了 后来想了想 当我们已经确定两个列数的时 ...
- 每天学点GDB 12
本文介绍在archlinux环境下,如何进行内核使用gdb配合qemu进行调试. 1. 安装qemu 2. 编译linux kernel 选择最新的内核版本,规避gcc编译出错的问题具体步骤如 ...
- 数据库连接jdbc理解
1.突然在想,既然数据库中有很多数据库,不同的database,在使用数据库时候,要指定使用的哪个数据库,用use database命令,指定特定数据库. 2.那java代码中,直接jdbc,直接st ...
- PHP-FPM + Nginx: 502错误
/etc/php5/fpm/pool.d/www.conf 里面找到这样一段代码: listen = 127.0.0.1:9000 在这上面代码的下面添加一行: listen = /var/run/p ...
- mysql-insert-返回主键id
function gen_this_insert_id($insert) { GLOBAL $link; $insert .= ' SELECT LAST_INSERT_ID();'; if (mys ...
- ubuntu挂载其他分区到/home下,将当前分区内容替换
有时候,我们装系统时,可能因为没注意,把某一个分区分小了,导致到最后,我们的那个盘容不下了, 这时,面临的两个选择就是:要么卸载一些软件,要么重新分区,重装系统,其实,还可以这样,去把其他 多余的盘分 ...
- freemarker 自定义标签
1.编写标签类 package com.pccw.business.fnd.common.filegen; import java.io.IOException; import java.io.Wri ...