jQuery 仿新浪网站的“返回顶部”效果

发布时间：2018-09-10 08:35:50 所属栏目：Unix 来源：站长网

导读：仿新浪网返回顶部效果，网上的一段代码，太长了，导致在应用的时候跟其它JS代码发生冲突不能正常使用，很不错的返回顶部代码，弃之可惜，或许有的朋友能用得上，高手也可以拿出精简一下代码了。为解决一些网页特效运行后不能显示效果（例如： jQuery 则需

　　仿新浪网“返回顶部”效果，网上的一段代码，太长了，导致在应用的时候跟其它JS代码发生冲突不能正常使用，很不错的返回顶部代码，弃之可惜，或许有的朋友能用得上，高手也可以拿出精简一下代码了。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!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="/uploads/common/js/jquery-1.4.2.min.js"></script> </head> <body> 如果预览时左下角提示错误，请刷新一下就可以看到效果了。<br> <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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：武陵站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!