返回顶部完整代码
2012-12-13 21:10
232 查看
下面是使用jQuery实现的“返回顶部”的完整代码,可以点击这里体验效果:http://www.keleyi.com/keleyi/phtml/gototop.htm
本文转载自柯乐义http://www.keleyi.com/dev/94fb5964c80ee829.htm
<!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> <meta name="keywords" content="柯乐义,www.keleyi.com,返回顶部完整代码"/> <meta name="description" content="柯乐义,keleyi.com,返回顶部完整代码" /> <script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.8.2.min.js"></script> <style type="text/css"> /*returnTop*/ p#back-to-top{ position:fixed; display:none; bottom:100px; right:80px; } p#back-to-top a{ text-align:center; text-decoration:none; color:#000; display:block; width:64px; /*使用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:transparent url('http://www.keleyi.com/keleyi/pmedia/go-top-keleyi-com.png') no-repeat -10px 15px; display:block; height:90px; width:90px; 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:transparent url('http://www.keleyi.com/keleyi/pmedia/go-top-keleyi-com.png') no-repeat -10px 18px; } </style> </head> <body> <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> <div style="background-color:#959822; width:100%;height:150px;">请滚动鼠标使页面向下</div> <div style="background-color:Green; width:100%;height:150px;">www.keleyi.com</div> <div style="background-color:Red; width:100%;height:150px;">欢迎</div> <div style="background-color:Yellow; width:100%;height:150px;">hi</div> <div style="background-color:Silver; width:100%;height:150px;">柯乐义</div> <div style="background-color:Aqua; width:100%;height:150px;">keleyi.com</div> <div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div> <div style="background-color:Green; width:100%;height:150px;">keleyi.com</div> <div style="background-color:Blue; width:100%;height:150px;">柯乐义</div> <div style="background-color:Olive; width:100%;height:150px;">柯乐义 返回顶部</div> <div style="background-color:Green; width:100%;height:150px;">A</div> <div style="background-color:Purple; width:100%;height:150px;">jquery</div> <div style="background-color:Green; width:100%;height:150px;">B</div> <div style="background-color:Lime; width:100%;height:150px;">keleyi.com</div> <div style="background-color:Orange; width:100%;height:150px;">完整代码</div> <script type="text/javascript"> $(function () { //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 $(function () { $(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#back-to-top").fadeIn(100); } else { $("#back-to-top").fadeOut(100); } }); //当点击跳转链接后,回到页面顶部位置 keleyi.com $("#back-to-top").click(function () { $('body,html').animate({ scrollTop: 0 }, 0); return false; }); }); }); </script> </body> </html>
本文转载自柯乐义http://www.keleyi.com/dev/94fb5964c80ee829.htm
相关文章推荐
- 返回顶部完整代码
- [置顶] 返回顶部完整代码
- 返回顶部完整代码
- 弹性返回顶部代码
- 仿CSDN Blog返回页面顶部功能实现原理及代码
- 返回顶部按钮的代码jQuery topLink Plugin
- js 返回顶部效果代码
- 几种常用网页返回顶部代码
- 弹性返回顶部代码
- 基于Jquery返回顶部代码html+css+js
- 多个返回 顶部的代码
- 返回顶部浮动图标代码
- 微信小程序 --- 6行代码实现页面返回顶部
- 返回顶部的代码
- 【Android】Listview返回顶部,快速返回顶部的功能实现,详解代码。
- 点击按钮——网页返回顶部代码
- 简单返回顶部代码及注释说明
- 基于jQuery实现返回顶部实例代码
- javascript返回顶部效果(自写代码)
- 回锚点和 返回顶部的代码