用jQuery实现返回顶部跳转效果
2012-10-08 13:35
549 查看
<!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>
<title></title>
<style type="text/css">
body, p, a, div
{
margin: 0px;
padding: 0px;
}
body
{
font: 14px/22px Georgia serif;
margin: 0 auto;
width: 640px;
}
h1
{
font: bold 80%/120% Arial, Helvetica, sans-serif;
text-transform: uppercase;
margin: 0 0 10px;
color: #999;
}
h2
{
font-size: 22px;
margin: 0 0 8px;
}
h3
{
font-size: 1.6em;
margin: 20px 0 5px;
}
a
{
color: #333;
text-decoration: none;
}
a:hover
{
color: #548B02;
}
p
{
margin-bottom: 25px;
}
p#back-to-top
{
width:80px;
display:none;
position: fixed;
bottom: 100px;
right: 100px;
}
p#back-to-top a
{
text-align: center;
text-decoration: none;
color: #d1d1d1;
display: block;
width: 80px; /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
-moz-transition: color 1s;
-webkit-transition: color 1s;
-o-transition: color 1s;
}
p#back-to-top a:hover
{
color: #979797;
}
p#back-to-top a span
{
background: #d1d1d1 url(images/arrow-up.png) no-repeat center center;
border-radius: 6px; /*圆角*/
display: block;
height: 80px;
width: 80px;
margin-bottom: 5px; /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
-moz-transition: background 1s;
-webkit-transition: background 1s;
-o-transition: background 1s;
}
#back-to-top a:hover span
{
background: #979797 url(images/arrow-up.png) no-repeat center center;
}
</style>
<script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//首先将#back-to-top隐藏
//$("#back-to-top").hide();
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#back-to-top").fadeIn(1500);
}
else {
$("#back-to-top").fadeOut(1500);
}
});
//当点击跳转链接后，回到页面顶部位置
$("#back-to-top").click(function () {
$("body,html").animate({ scrollTop: 0 }, 1000);
return false;
});
});
</script>
</head>
<body id="top">
<p id="back-to-top">
<a href="#top"><span></span>返回顶部</a></p>
<h1>
Demo</h1>
<h2>
<a href="http://startwmlife.com/demo/jQuery-Back-To-Top.html">用jQuery实现最人性化的返回顶部跳转效果</a></h2>
<p class="credits">
<em>by <a href="http://startwmlife.com">飞鱼的声纳</a></em></p>
<p>
WEB前端研发工程师，在国内算是一个朝阳职业，这个领域没有学校的正规教育，大多数人都是靠自己自学成才。本文主要介绍自己从事web开发以来（从大二至今）看过的书籍和自己的成长过程，目的是给想了解JavaScript或者是刚接触JavaScript的朋友，介绍如何通过循序渐进的看书来学习javascript。</p>
<p>
一。 入门级 ：就是有一定的基础（比如最常见的HTML标签及其属性、事件、方法;最常见的CSS属性;基础的JavaScript编程能力），能够完成一些简单的WEB前端需求。</p>
<p>
推荐：《JavaScript dom 编程艺术》</p>
<p>
理由：此书绝对是入门的好书，本人也是在接触JS一段时间后才看的这本书。此书从JS的历史 - JS基础语法知识 - DOM介绍和简单的使用。现在这本书已经出了第二版，需要的朋友直接第二版就行。</p>
<p>
评价：简洁，实用，详细，易懂，书不厚，相信很快就能看完。</p>
<p>
当然，作为入门书的话《JavaScript权威指南》也非常强大（这名字可不是白起），其实说起来也惭愧，本人至今都没有买过这本书，最开始是因为这个书实在是小贵，只好借朋友的看，不过也就看了个周末。网上关于此书的评价很多，意思大概都是说这书就是一个JS的文档手册，如果你有闲钱，并且习惯翻书查询，那么就来一本吧。顺便提醒一句，这本书的第六版英文版已经出来了。</p>
<p>
二。初级开发：本人以前的DEV leader兼恩师这么说过：“初级开发人员的标志就是需要在中级和高级开发的指导下完成工作”。首先不要苛责代码的对错严谨，毕竟每个程序员都有这样的一个过程，就是这个级别的特征。</p>
<p>
推荐：《javascript高级程序设计》（第二版）</p>
<p>
理由：这本书的作者是 Nicholas C.Zakas ，博客地址是 http://www.nczonline.net/ ，大家可以去多关注，雅虎的前端工程师，是YUI的代码贡献者，可想而知这本书得含金量，他出的书都广受好评。这本书已经出了第二版，而且与第一版相比内容更新很大，直接第二版就行。不要被书名的“高级”唬住，只要有JS基础语法知识和DOM基础知识就行，而且本书开始阶段还是介绍JS和DOM的语法知识。</p>
<p>
评论：重点推荐一下第五章（类型），第六章（OOP），第七章（匿名），多看几遍，至少要完全看明白，能为以后进阶打好基础，个人感觉这几章是本书的精华所在。这本书在入门的时候看节奏会快了一些，所以不建议初学者看，可是相对于我一会要介绍的书又算基础一点，所以建议先阅读完这本书，对浏览器兼容和语法知识有一定了解之后再往下阅读。</p>
<p>
推荐：《高性能 JavaScript》《JavaScript语言精髓》</p>
<p>
理由：本人先看的是《高性能JS》，这本书还是 Nicholas C.Zakas 所著，经典之作，书中大量举例了各种不同写法的JavaScript在浏览器中的性能情况，对规范JavaScript代码和提升性能有很好的帮助，最后提到了很多工具和性能测试的方法，都是灰常灰常有实际作用的，看得出作者很厚道（好吧，偶承认了，偶是他的粉丝）^_^，记忆最深的一句话：“如果
JavaScript 执行了几秒钟，那么很可能是你做错了什么”;；</p>
<p>
《语言精髓》和《高性能》有少部分关键知识都重复提到了，可是为什么要推荐这本书，因为本书对JS语言本质的描述太棒了，这是一本介绍JavaScript语言本质的权威书籍，从
“对象”，“函数”，“继承”，“数组”等等多个重要知识着手。我补一句话 - 本书需要反复阅读。</p>
<p>
评论：都是好书，都很薄，而且所说的内容只要有基础都不难。相信读完之后会对JS又有新的认识，且对以后的代码规范和浏览器差异性等高级问题有了新的认识，如果读完之后会有种被灌顶的感觉，那么恭喜你，你离中级不远了。</p>
<p>
三。中级开发：还是本人以前的DEV leader兼恩师这么说过：“中级开发人员的标志就是在高级开发或架构师较少的指导下高质量的完成工作，并对产品或项目有自己的想法与理解”。</p>
<p>
强烈推荐：《JavaScript DOM高级程序设计》</p>
<p>
理由：此书灰常犀利，本人一共看了近半年的时间，已反复阅读多次。说实话，这本书的翻译一般，代码也有少许错误，可是这不影响这本书的强大，通过学习本书，可以理解一个JS的库如何产生，自己动手写一个简单的自己的JS库，如果你打算研究其他的JS库或者正在研究其他的JS库，那么这本书会使你的理解达到新的高度，进阶高级必读，写库必读。</p>
<p>
评论：异常强大的一本JS巨作，此书不薄，强烈推荐。现在已经买不到正版了，我这里有电子版，有需要的朋友留下邮箱，晚上发给你们。</p>
<p>
强烈推荐：《JavaScript设计模式》</p>
<p>
理由：异常生猛的一本书，看书名带“设计模式”就知道，这本书想要读明白有点困难，本人自己感觉，只要某书一带“模式”这两字，反正就简单不了。本书对JS的“模仿接口”，“封装”，“继承”，“链式调用”，“工厂模式”等各种具体的设计模式及其在JavaScript
语言中的应用进行了详细的介绍，运用设计模式使代码更模块化、更高效并且更易维护。</p>
<p>
评论：书不厚，可真的是内容丰富且高深，强烈建议购买。</p>
<p>
推荐：《高性能网站建设指南》《高性能网站建设进阶指南》</p>
<p>
理由：在读完前几本书之后我们对前端的性能和自己的代码的效率已经达到相当的高度了，然后我们在接触一些前端工程师的一些精髓。本书对HTTP请求，CDN，内容缓存和一些web开发中常见问题进行讲解。</p>
<p>
评论：书都不厚，可是说的都是比较实用的东西，可是用不用的上还得看个人和项目需要了。</p>
<p>
以上就是本人一路走来看的JS相关书籍，朋友会问，为什么就只介绍的中级的，那么高级看的书在哪？有木有高级的书？进阶高级程序员之路又在哪？说下我自己的看法和对年轻朋友的建议吧，说的不好或不对请原谅，其实我也才真正工作两年多：</p>
<p>
1.主要是工作经验问题。达到一定程度以后真的合适的书很难找了，更多只有在工作中总结和积累。工作的越久碰到过的问题也就越多，^_^。所以一般说高级程序员一般都是至少都3年以上的工作经验，没办法，实践才出真理。</p>
<p>
2.我觉得高级web前端灰常有必要总结一个自己的JS库，不管大小，总归有一套自己的东西（嘿嘿，如果认真的实践过《JS DOM高级》的内容，估计有一套JS库的原型了）。</p>
<p>
3.前端有必要懂得和熟悉一本服务端语言，其实计算机语言很多语法大致都差不多，不同的就是内置的方法和属性，所以去熟悉一门语言并不难。为什么有必要，因为精通一门语言还是不够的，多学一门语言的好处我就不啰嗦了，大家可以看看这篇文章
- 《门门通还是精一门》</p>
<p>
4.许多年轻人都有眼高手低的毛病，我也一样，例如，有的人认为自己编起程序来很顺手，不用查手册，说写就写，很熟练，几乎什么程序都能编出来，就认为自己对这种语言很精通了。其实对于一门语言的掌握程度是不可深测的，对于语言掌握其实是一个无止尽的过程，没有终点。编写时间的长短和编写熟练程度，仅仅是精通语言表现的一个方面。更重要的是程序员要掌握这个语言的适用范围，整体构架，语法规则、功能分类等基础理论方面的知识，并能利用这方面的知识，用最科学的方法去解决现实中各种项目的各个问题。</p>
<p>
终于写完了，完成了对自己的要求 - 一个月写一个较高质量的文章或技术分享。</p>
<p>
最后，谢谢大家，祝大家工作愉快。</p>
</body>
</html>
通过 为知笔记 发布
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body, p, a, div
{
margin: 0px;
padding: 0px;
}
body
{
font: 14px/22px Georgia serif;
margin: 0 auto;
width: 640px;
}
h1
{
font: bold 80%/120% Arial, Helvetica, sans-serif;
text-transform: uppercase;
margin: 0 0 10px;
color: #999;
}
h2
{
font-size: 22px;
margin: 0 0 8px;
}
h3
{
font-size: 1.6em;
margin: 20px 0 5px;
}
a
{
color: #333;
text-decoration: none;
}
a:hover
{
color: #548B02;
}
p
{
margin-bottom: 25px;
}
p#back-to-top
{
width:80px;
display:none;
position: fixed;
bottom: 100px;
right: 100px;
}
p#back-to-top a
{
text-align: center;
text-decoration: none;
color: #d1d1d1;
display: block;
width: 80px; /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
-moz-transition: color 1s;
-webkit-transition: color 1s;
-o-transition: color 1s;
}
p#back-to-top a:hover
{
color: #979797;
}
p#back-to-top a span
{
background: #d1d1d1 url(images/arrow-up.png) no-repeat center center;
border-radius: 6px; /*圆角*/
display: block;
height: 80px;
width: 80px;
margin-bottom: 5px; /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
-moz-transition: background 1s;
-webkit-transition: background 1s;
-o-transition: background 1s;
}
#back-to-top a:hover span
{
background: #979797 url(images/arrow-up.png) no-repeat center center;
}
</style>
<script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//首先将#back-to-top隐藏
//$("#back-to-top").hide();
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#back-to-top").fadeIn(1500);
}
else {
$("#back-to-top").fadeOut(1500);
}
});
//当点击跳转链接后，回到页面顶部位置
$("#back-to-top").click(function () {
$("body,html").animate({ scrollTop: 0 }, 1000);
return false;
});
});
</script>
</head>
<body id="top">
<p id="back-to-top">
<a href="#top"><span></span>返回顶部</a></p>
<h1>
Demo</h1>
<h2>
<a href="http://startwmlife.com/demo/jQuery-Back-To-Top.html">用jQuery实现最人性化的返回顶部跳转效果</a></h2>
<p class="credits">
<em>by <a href="http://startwmlife.com">飞鱼的声纳</a></em></p>
<p>
WEB前端研发工程师，在国内算是一个朝阳职业，这个领域没有学校的正规教育，大多数人都是靠自己自学成才。本文主要介绍自己从事web开发以来（从大二至今）看过的书籍和自己的成长过程，目的是给想了解JavaScript或者是刚接触JavaScript的朋友，介绍如何通过循序渐进的看书来学习javascript。</p>
<p>
一。 入门级 ：就是有一定的基础（比如最常见的HTML标签及其属性、事件、方法;最常见的CSS属性;基础的JavaScript编程能力），能够完成一些简单的WEB前端需求。</p>
<p>
推荐：《JavaScript dom 编程艺术》</p>
<p>
理由：此书绝对是入门的好书，本人也是在接触JS一段时间后才看的这本书。此书从JS的历史 - JS基础语法知识 - DOM介绍和简单的使用。现在这本书已经出了第二版，需要的朋友直接第二版就行。</p>
<p>
评价：简洁，实用，详细，易懂，书不厚，相信很快就能看完。</p>
<p>
当然，作为入门书的话《JavaScript权威指南》也非常强大（这名字可不是白起），其实说起来也惭愧，本人至今都没有买过这本书，最开始是因为这个书实在是小贵，只好借朋友的看，不过也就看了个周末。网上关于此书的评价很多，意思大概都是说这书就是一个JS的文档手册，如果你有闲钱，并且习惯翻书查询，那么就来一本吧。顺便提醒一句，这本书的第六版英文版已经出来了。</p>
<p>
二。初级开发：本人以前的DEV leader兼恩师这么说过：“初级开发人员的标志就是需要在中级和高级开发的指导下完成工作”。首先不要苛责代码的对错严谨，毕竟每个程序员都有这样的一个过程，就是这个级别的特征。</p>
<p>
推荐：《javascript高级程序设计》（第二版）</p>
<p>
理由：这本书的作者是 Nicholas C.Zakas ，博客地址是 http://www.nczonline.net/ ，大家可以去多关注，雅虎的前端工程师，是YUI的代码贡献者，可想而知这本书得含金量，他出的书都广受好评。这本书已经出了第二版，而且与第一版相比内容更新很大，直接第二版就行。不要被书名的“高级”唬住，只要有JS基础语法知识和DOM基础知识就行，而且本书开始阶段还是介绍JS和DOM的语法知识。</p>
<p>
评论：重点推荐一下第五章（类型），第六章（OOP），第七章（匿名），多看几遍，至少要完全看明白，能为以后进阶打好基础，个人感觉这几章是本书的精华所在。这本书在入门的时候看节奏会快了一些，所以不建议初学者看，可是相对于我一会要介绍的书又算基础一点，所以建议先阅读完这本书，对浏览器兼容和语法知识有一定了解之后再往下阅读。</p>
<p>
推荐：《高性能 JavaScript》《JavaScript语言精髓》</p>
<p>
理由：本人先看的是《高性能JS》，这本书还是 Nicholas C.Zakas 所著，经典之作，书中大量举例了各种不同写法的JavaScript在浏览器中的性能情况，对规范JavaScript代码和提升性能有很好的帮助，最后提到了很多工具和性能测试的方法，都是灰常灰常有实际作用的，看得出作者很厚道（好吧，偶承认了，偶是他的粉丝）^_^，记忆最深的一句话：“如果
JavaScript 执行了几秒钟，那么很可能是你做错了什么”;；</p>
<p>
《语言精髓》和《高性能》有少部分关键知识都重复提到了，可是为什么要推荐这本书，因为本书对JS语言本质的描述太棒了，这是一本介绍JavaScript语言本质的权威书籍，从
“对象”，“函数”，“继承”，“数组”等等多个重要知识着手。我补一句话 - 本书需要反复阅读。</p>
<p>
评论：都是好书，都很薄，而且所说的内容只要有基础都不难。相信读完之后会对JS又有新的认识，且对以后的代码规范和浏览器差异性等高级问题有了新的认识，如果读完之后会有种被灌顶的感觉，那么恭喜你，你离中级不远了。</p>
<p>
三。中级开发：还是本人以前的DEV leader兼恩师这么说过：“中级开发人员的标志就是在高级开发或架构师较少的指导下高质量的完成工作，并对产品或项目有自己的想法与理解”。</p>
<p>
强烈推荐：《JavaScript DOM高级程序设计》</p>
<p>
理由：此书灰常犀利，本人一共看了近半年的时间，已反复阅读多次。说实话，这本书的翻译一般，代码也有少许错误，可是这不影响这本书的强大，通过学习本书，可以理解一个JS的库如何产生，自己动手写一个简单的自己的JS库，如果你打算研究其他的JS库或者正在研究其他的JS库，那么这本书会使你的理解达到新的高度，进阶高级必读，写库必读。</p>
<p>
评论：异常强大的一本JS巨作，此书不薄，强烈推荐。现在已经买不到正版了，我这里有电子版，有需要的朋友留下邮箱，晚上发给你们。</p>
<p>
强烈推荐：《JavaScript设计模式》</p>
<p>
理由：异常生猛的一本书，看书名带“设计模式”就知道，这本书想要读明白有点困难，本人自己感觉，只要某书一带“模式”这两字，反正就简单不了。本书对JS的“模仿接口”，“封装”，“继承”，“链式调用”，“工厂模式”等各种具体的设计模式及其在JavaScript
语言中的应用进行了详细的介绍，运用设计模式使代码更模块化、更高效并且更易维护。</p>
<p>
评论：书不厚，可真的是内容丰富且高深，强烈建议购买。</p>
<p>
推荐：《高性能网站建设指南》《高性能网站建设进阶指南》</p>
<p>
理由：在读完前几本书之后我们对前端的性能和自己的代码的效率已经达到相当的高度了，然后我们在接触一些前端工程师的一些精髓。本书对HTTP请求，CDN，内容缓存和一些web开发中常见问题进行讲解。</p>
<p>
评论：书都不厚，可是说的都是比较实用的东西，可是用不用的上还得看个人和项目需要了。</p>
<p>
以上就是本人一路走来看的JS相关书籍，朋友会问，为什么就只介绍的中级的，那么高级看的书在哪？有木有高级的书？进阶高级程序员之路又在哪？说下我自己的看法和对年轻朋友的建议吧，说的不好或不对请原谅，其实我也才真正工作两年多：</p>
<p>
1.主要是工作经验问题。达到一定程度以后真的合适的书很难找了，更多只有在工作中总结和积累。工作的越久碰到过的问题也就越多，^_^。所以一般说高级程序员一般都是至少都3年以上的工作经验，没办法，实践才出真理。</p>
<p>
2.我觉得高级web前端灰常有必要总结一个自己的JS库，不管大小，总归有一套自己的东西（嘿嘿，如果认真的实践过《JS DOM高级》的内容，估计有一套JS库的原型了）。</p>
<p>
3.前端有必要懂得和熟悉一本服务端语言，其实计算机语言很多语法大致都差不多，不同的就是内置的方法和属性，所以去熟悉一门语言并不难。为什么有必要，因为精通一门语言还是不够的，多学一门语言的好处我就不啰嗦了，大家可以看看这篇文章
- 《门门通还是精一门》</p>
<p>
4.许多年轻人都有眼高手低的毛病，我也一样，例如，有的人认为自己编起程序来很顺手，不用查手册，说写就写，很熟练，几乎什么程序都能编出来，就认为自己对这种语言很精通了。其实对于一门语言的掌握程度是不可深测的，对于语言掌握其实是一个无止尽的过程，没有终点。编写时间的长短和编写熟练程度，仅仅是精通语言表现的一个方面。更重要的是程序员要掌握这个语言的适用范围，整体构架，语法规则、功能分类等基础理论方面的知识，并能利用这方面的知识，用最科学的方法去解决现实中各种项目的各个问题。</p>
<p>
终于写完了，完成了对自己的要求 - 一个月写一个较高质量的文章或技术分享。</p>
<p>
最后，谢谢大家，祝大家工作愉快。</p>
</body>
</html>
通过 为知笔记 发布
附件列表
arrow-up.png
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery实现返回顶部按钮效果
- 用jQuery实现渐隐渐显的返回顶部效果（附多图）
- ASP.NET jQuery 实例9 通过控件hyperlink实现返回顶部效果
- jQuery实现返回顶部效果的方法
- jQuery实现返回顶部按钮效果
- 用jQuery实现的智能隐藏、滑动效果的返回顶部代码
- jQuery实现返回顶部效果
- [转载] jQuery实现一个动画版返回顶部和底部的效果
- jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
- jQuery实现简单而且很酷的返回顶部链接效果
- ASP.NET jQuery 食谱9 (通过控件hyperlink实现返回顶部效果)
- JQuery 实现返回顶部效果
- ASP.NET jQuery 实例9 通过控件hyperlink实现返回顶部效果
- Jquery---用jQuery实现的智能隐藏、滑动效果的返回顶部代码
- jQuery实现返回顶部效果的方法
- jQuery实现返回顶部按钮效果
- jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
- jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
- jquery实现页面常用的返回顶部效果