转:http://www.cnblogs.com/DemoLee/archive/2012/04/20/2459082.html
先来看几个图片效果:
提供几个样式图片:
样式图片都可以自己随便修改了
样式css:
<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; } #back-to-top{ position:fixed; bottom:100px; left:60px; } #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; } #back-to-top a:hover{ color:#979797; } #back-to-top a span{ background:#d1d1d1; border-radius:6px; display:block; height:80px; width:80px; background:#d1d1d1 url(images/arrow_up1.png) no-repeat center center; /*这是图片链接地址1*/ margin-bottom:5px; -moz-transition:background 1s; -webkit-transition:background 1s; -o-transition:background 1s; } #back-to-top a:hover span{ background:#979797 url(images/arrow_up1.png) no-repeat center center; /*这是图片链接地址1*/ } </style>
Jquery代码:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>//这里引入你自己的jq或者用这个在线jq <script type="text/javascript"> $(document).ready(function () { //首先将#back-to-top隐藏 $("#back-to-top").hide(); //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 $(function () { $(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#back-to-top").fadeIn(1500); } else { $("#back-to-top").fadeOut(1000); } }); //当点击跳转链接后,回到页面顶部位置 $("#back-to-top").click(function () { $('body,html').animate({ scrollTop: 0 }, 1000); return false; }); }); }); </script>
html:
<body id="top"> <p id="back-to-top"><a href="#top"><span></span>回到顶部</a></p> 这里面放文章的内容就好了 </body>
文章内容自己添加
热爱编程,热爱技术,热爱生活
搜索
最新随笔
随笔分类(44)
随笔档案(43)
积分与排名
- 积分 - 12483
- 排名 - 10740
最新评论
- 1. Re:Easyui1.32源码翻译--datagrid(数据表格)
- 顶博主,美周郎, 金链男子白玉床. 战罢娇娘三百万, 江湖人称不倒枪, 银镯女优常留寝, 夸你活好耐力强.
- 2. Re:Easyui1.32源码翻译--datagrid(数据表格)
- 赞
- 3. Re:Easyui1.32源码翻译--datagrid(数据表格)
- 武腾兰、吉泽明步、苍井空、松岛枫、神谷姬、小泽玛莉亚、高树玛丽亚、山本梓、樱树露衣、濑户由衣、树麻里子、星野光、白石瞳、忧木瞳、白石日和、相田桃、浅仓舞、小林瞳、夕树舞子、美穗由纪、小室友里、黑木香、朝冈实岭、美里真里、饭岛爱、北原梨奈、秋元友美、川合里美、细川百合子、麻生早苗、松阪季实子、川岛和津实、小泽奈美、叶山丽子、金泽文子、凉木桃香、小泽圆、铃木麻奈美、白鸟智香子、中谷香子、市川香织、蜷川...
- 4. Re:JavaScript数据类型之Boolean类型
- C 也是这种机制呐
阅读排行榜
评论排行榜
❄
❄
❄
❄
❄
❄
昵称:
不改了注销订阅评论
[使用Ctrl+Enter键快速提交]