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 ...
随机推荐
- Embedded Database service fails to start after installing or migrating to Symantec Endpoint Protection (SEP) 12.1.5 (RU5)
https://support.symantec.com/en_US/article.TECH225587.html
- PHP 设计模式 笔记与总结（7）适配器模式
① 适配器模式可以将截然不同的函数接口封装成统一的 API ② 实际应用举例:PHP 的数据库操作有 mysql,mysqli,pdo 三种,可以用适配器模式统一成一致.类似的场景还有 cache 适 ...
- ThinkPHP 3.2.2 在 volist 多重循环嵌套中使用 if 判断标签
今天在 ThinkPHP 3.2.2 的试图模板中使用多重循环,用来把相应类别下对应的文章都依次循环出来,但是无论如何只能循环出类别,类别下的文章无法循环出,( 错误 ) 代码如下: <voli ...
- UITableview 多行删除
// RootViewController.m #import "RootViewController.h"#import "NextViewController.h& ...
- 西秦的ACE-Python教程 一、Python本地开发环境部署
西秦的ACE-Python教程 一.Python本地开发环境部署 西秦 级别: 论坛版主 发帖 1357 云币 2782 加关注 写私信 只看楼主 更多操作楼主 发表于: 10-10 ...
- thinkphp开发技巧经验分享
thinkphp开发技巧经验分享 www.111cn.net 编辑:flyfox 来源:转载 这里我给大家总结一个朋友学习thinkphp时的一些笔记了,从变量到内置模板引擎及系统变量等等的笔记了,同 ...
- Latex使用
tex是一种文本格式化程序语言,通过使用各种命令,对文本进行排版定义,最后通过编译,生成美观的排版完毕的文档. 同html.css的组合很想,定义元素以及元素的显示属性,按照编写好的文本格式化内容,在 ...
- Error:(12) No resource identifier found for attribute 'titles' in package 'com.itheima52.mobilesafe5
http://stackoverflow.com/questions/5819369/error-no-resource-identifier-found-for-attribute-adsize-i ...
- oracle utf8字符集转gbk(转)
近日有同事在外面部署系统时,安装数据库时可能选择了UTF-8编码格式,导入insert语句时,一个汉字被认为三个字节,这是不行的. 结合上网搜到的资料,将oracle数据库的编码格式,从utf-8改为 ...
- taocode
http://code.taobao.org/project/lang/list/Go/1/