返回顶部js代码
- <!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 http-equiv="content-type" content="text/html;charset=gb2312">
- <style type="text/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);
- }
- </style>
- <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
- </head>
- <body>
- <p>如果预览时左下角提示错误，<font color=red>请先刷新一下本页面</font>就可以看到效果了。</p>
- <p> 拖动滚动条到页面底部就会显示“返回顶部”按钮。</p>
- <p></p>
- <div style="height:2000px;"></div>
- <script type="text/javascript">
- (function() {
- var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').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(); });
- })();
- </script>
- </body>
- </html>
本文转自许琴 51CTO博客，原文链接：http://blog.51cto.com/xuqin/929315，如需转载请自行联系原作者
