jQuery火箭图标返回顶部代码
作者:zhirong1230 创建时间:2014-06-27 阅读次数:1234
jQuery火箭图标返回顶部代码,滚动条滑到距离顶部100PX时,火箭图标返回顶部按钮会出现,
点击火箭图标,页面会回到顶部,同时火箭图标也会向顶部飞去。
$(function() { var e = $("#rocket-to-top"), t = $(document).scrollTop(), n,r,i = !0; $(window).scroll(function() { var t = $(document).scrollTop(); t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({ marginTop: "-1000px" }, "normal", function() { e.css({ "margin-top": "-125px",display: "none"}),i = !0})) : e.fadeIn("slow")}), e.hover(function() { $(".level-2").stop(!0).animate({opacity: 1})}, function() {$(".level-2").stop(!0).animate({opacity: 0})}), //download by www.sucaijiayuan.com $(".level-3").click(function() { function t() { var t = e.css("background-position"); if (e.css("display") == "none" || i == 0) { clearInterval(n), e.css("background-position", "0px 0px"); return } switch (t){ case "0px 0px": e.css("background-position", "-298px 0px"); break; case "-298px 0px": e.css("background-position", "-447px 0px"); break; case "-447px 0px": e.css("background-position", "-596px 0px"); break; case "-596px 0px": e.css("background-position", "-745px 0px"); break; case "-745px 0px": e.css("background-position", "-298px 0px"); } } if (!i) return; n = setInterval(t, 50), $("html,body").animate({scrollTop: 0},"slow"); }); });
源文件下载地址
关键词(keywords):jQuery火箭图标返回顶部代码
前一篇: 都是严寒惹的祸?美国经济萎缩超预期增长后劲受限 后一篇:世界首个五端柔性直流输电工程在浙江舟山正式投运