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 ...
随机推荐
- 分布式架构高可用架构篇_05_fastdfs集群的安装
参考: 龙果学院http://www.roncoo.com/share.html?hamc=hLPG8QsaaWVOl2Z76wpJHp3JBbZZF%2Bywm5vEfPp9LbLkAjAnB%2B ...
- ASP.NET MVC系列 框架搭建（三）之服务层的搭建
邯郸学步 吾虽是一不知名的菜鸟,但,吾亦有一个从后台程序员成为一名小小架构师梦想,深知架构师不是想想就成的. 吾已工作过一阵子,吾妄想在真正毕业之后工作一年左右就能拿到那个数ten thousand的 ...
- 将JsonObject转换成HashMap
1.工具类: Utils.class: (1)简单的键值对map public class Utils { public static String getRaw(Context context, i ...
- Linux 计划任务 Crontab 笔记与总结（5）crontab 常见错误与案例
① 环境变量 cd ~ pwd 就会到你登陆的那个用户的根目录下 ls -a 能够查看到 .bash_profile 这个文件 vim .bash_profile 这里面设置了一些环境变量. 可以设置 ...
- PHP文件操作 之打开远程文件
//配置php.ini 开启allow_url_fopen选项 //访问的文件有可读或者可写的权限 //$f = fopen('http://www.example.com/a.txt','rb'); ...
- solr4.7中文分词器（ik-analyzer）配置
solr本身对中文分词的处理不是太好,所以中文应用很多时候都需要额外加一个中文分词器对中文进行分词处理,ik-analyzer就是其中一个不错的中文分词器. 一.版本信息 solr版本:4.7.0 需 ...
- ActionResult,PartialViewResult,EmptyResult,ContentResult
HttpGet HttpPost HttpDelete HttpPut HeepHead HttpOptions HttpPatch属性都是动作方法选定器的一份子,比如若在action上套用H ...
- bug 发表文章不显示图片
bug 描述: 现象是我们这不能发布图片, 测试说患教方向是可以正常发布图片的(还是要感激测试,正是他们鞭策我们不断挑战困难,解决之,从而提高自己姿势水平). 图片没上传上去, 服务端协助查找发现没调 ...
- java，for循环中的穷举、迭代、冒泡例题
1.100以内与7相关的数 //100以内与7相关的数: public static void main1(String[] args) { for(int i=1;i<=100;i++){ i ...
- BAE3.0上的java+tomcat代码发布
---------------------------------2016/01/25更新-------------------------------------- 最近两天去百度开放云,发现它再也 ...