jQuery实现返回顶部链

yuhang8910

贡献于2013-08-16

字数:2461 关键词: jQuery JavaScript框架

 jQuery实现返回顶部链 一、HTML(基本结构)

返回顶部

有了上面的html后,当我们点击”返回顶部”这个链接时,就会自动跳转到body标签的位置,也就是页面的顶部。 二、CSS(样式化) 之所以在上面html代码的< a>标签中添加一个空的< span>标签,目的是为了创建我们预想的返回顶部链接样式,如下图: 接下来我们需要使用position : fixed;属性将跳转链接固定到页面上,这样它就可以随时停留在视线范围内。以下是全部CSS代码: p#back-to-top{       position:fixed;       bottom:100px;       left:80px; } 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属性给标签背景颜色添加渐变效果*/       -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; } 三、jQuery(动态效果) 使用jQuery要实现的效果是:当页面初次载入,浏览器滚动条处于最顶部的时候,跳转链接处于隐藏状态。当滚动条向下滚动后,跳转链接逐渐显出,当点击跳转链接后,页面逐渐滚动至顶部,跳转链接逐渐消失。以下是jQuery代码: 四、兼容性 这里我们给body标签添加了id=”#top”,目的是当浏览器不支持javascript的时候,也可实现返回顶部的效果。实际上jQuery可以让滚动条定位于任何位置,所以这里我们保留了对浏览器的兼容性。 CSS代码: .backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; color: #fff; font-size: 12px; text-align: center; position: fixed; _position: absolute; right: 10px; bottom: 100px; _bottom: "auto"; cursor: pointer; opacity: .6; filter: Alpha(opacity=60); } JS代码: (function() { var $backToTopTxt = "返回顶部", $backToTopEle = $('
').appendTo($("body")) .text($backToTopTxt).attr("title", $backToTopTxt).click(function() { $("html, body").animate({ scrollTop: 0 }, 120); }), $backToTopFun = function() { var st = $(document).scrollTop(), winh = $(window).height(); (st > 0)? $backToTopEle.show(): $backToTopEle.hide(); //IE6下的定位 if (!window.XMLHttpRequest) { $backToTopEle.css("top", st + winh - 166); } }; $(window).bind("scroll", $backToTopFun); $(function() { $backToTopFun(); }); })();

下载文档,方便阅读与编辑

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 2 金币 [ 分享文档获得金币 ]
0 人已下载

下载文档

相关文档