源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jquery配合css简单实现返回顶部效果

  • 时间:2022-10-08 20:03 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery配合css简单实现返回顶部效果
CSS:
[u]复制代码[/u] 代码如下:
.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); }
jQuery代码
[u]复制代码[/u] 代码如下:
(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(); }); })();:
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部