首页 / 脚本样式 / JavaScript / 纯js实现悬浮按钮组件

下面附上代码 使用方式很简单只需要 在页面引入这段js 即可

$（（）=> { let param = {tag: true,num: 1,ele: document.createElement（"div"）,icon: "",homeIcon: "",moreIcon: "",personalIcon: "",closeIcon: "",distance: "500",css: "position:fixed;" +"bottom:4rem;" +"box-shadow:10px 10px 10px gray;" +"right:10px;" +"display:none;" +"font-size:1.5rem;" +"color:#fff;" +"z-index:1000;" +"height:2.5rem;" +"width:2.5rem;" +"background:#f44336;" +"border-radius:50%;" +"line-height:2.5rem;" +"text-align:center",menuCss: "position:absolute;" +// "bottom:3rem;" +"display:none;" +"box-shadow:10px 10px 10px gray;" +"font-size:1.2rem;" +"color:#fff;" +"background:orange;" +"height:2rem;" +"width:2rem;" +"border-radius:50%;" +"text-align:center;" +"line-height:2rem;"// type: "#top" }; {document.querySelector（"body"）.appendChild（（（ele）=> { ele.className = "scroll iconfont"; ele.innerHTML = param.moreIcon; // ele.href = param.type; ele.style.cssText = param.css; for （let i = 0; i < 3; i++） {let menu_personal = document.createElement（"a"）;menu_personal.className = "iconfont";menu_personal.style.cssText = param.menuCss;switch （i） { case 0:setStyle（menu_personal, "#2196f3", "2.4rem", "2.4rem", param.homeIcon, "home"）;break; case 1:setStyle（menu_personal, "#4caf50", 0, "3.5rem", param.personalIcon, "personal"）;break; case 2:setStyle（menu_personal, "#fdd835", "3.5rem", "0", param.icon, "top"）;break;}param.ele.appendChild（menu_personal）; } return ele;}）（param.ele））;function setStyle（ele, ...args） { ele.style.background = args[0]; ele.style.bottom = args[1]; ele.style.right = args[2]; ele.innerHTML = args[3]; ele.id = args[4];} } {$（window）.scroll（（）=> { var scrollValue = $（window）.scrollTop（）; if （scrollValue > param.distance） {if （param.tag） { $（param.ele）.css（"display", "block"）.animateCss（"fadeInRight"）; param.tag = ！param.tag;} } else {if （！param.tag） { $（param.ele）.css（"display", "none"）; $（param.ele）.children（）.css（"display", "none"）; param.num++; param.tag = ！param.tag;} }}）;$（param.ele）.click（（e）=> { window.e = e; switch （e.target.id） {case "home": if （！getTypeNative（）） {window.location.href = getAbsolutePath（） + "/fenqihui/pages/recommended/recommended_index.html"; } else if （getTypeNative（） === "ios"） {backHome（）; } else if （getTypeNative（） === "android"） {android.backHome（）; } break;case "personal": if （！getTypeNative（）） {window.location.href = getAbsolutePath（） + "/fenqihui/pages/account/user_personal.html"; } else if （getTypeNative（） === "ios"） {//todo://前往个人中心backAccount（）; } else if （getTypeNative（） === "android"） {android.backAccount（）; } break;case "top": $（window）.scrollTop（0）; break; } param.num % 2 == 0 && $（param.ele）.children（）.css（"display", "none"） || $（param.ele）.children（）.css（"display", "block"）.animateCss（"swing"）; param.num++;}） }}）;