JavaScript File

1const goTop={timer:null,css:'#go-top{<vars>display:block;position:fixed;z-index:var(--gtz, 1000);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;width:var(--gts, 50px);height:var(--gts, 50px);border-radius:var(--gtr, 50%);bottom:var(--gty, 50px);right:var(--gtx, 50px);background-color:var(--gtbg, #fff);-webkit-transition:250ms linear;transition:250ms linear;-webkit-transform:translateX(calc(var(--gts, 50px) + var(--gtx, 50px)));transform:translateX(calc(var(--gts, 50px) + var(--gtx, 50px)));opacity:.5}

2#go-top::before{content:"";display:block;position:absolute;top:40%;left:50%;width:20%;height:20%;border-color:var(--gtcolor, #008);border-style:solid;border-width:2px 2px 0 0;-webkit-transform:translate(-50%, 0) rotate(-45deg);transform:translate(-50%, 0) rotate(-45deg)}

3#go-top::after{content:"";display:block;position:absolute;top:40%;left:50%;width:2px;height:25%;background-color:var(--gtcolor, #008);-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}

4#go-top.show{-webkit-transform:translateX(0);transform:translateX(0)}

5#go-top:hover{opacity:1}

6#go-top:hover::before{-webkit-animation:gtjumpb .5s ease infinite;animation:gtjumpb .5s ease infinite}

7#go-top:hover::after{-webkit-animation:gtjumpa .5s ease infinite;animation:gtjumpa .5s ease infinite}

8@-webkit-keyframes gtjumpa{0%{-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}

950%{-webkit-transform:translate(-50%, 20%);transform:translate(-50%, 20%)}

10100%{-webkit-transform:translate(-50%, -20%);transform:translate(-50%, -20%)}

11}

12@keyframes gtjumpa{0%{-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}

1350%{-webkit-transform:translate(-50%, 20%);transform:translate(-50%, 20%)}

14100%{-webkit-transform:translate(-50%, -20%);transform:translate(-50%, -20%)}

15}

16@-webkit-keyframes gtjumpb{0%{-webkit-transform:translate(-50%, 0) rotate(-45deg);transform:translate(-50%, 0) rotate(-45deg)}

1750%{-webkit-transform:translate(-50%, 20%) rotate(-45deg);transform:translate(-50%, 20%) rotate(-45deg)}

18100%{-webkit-transform:translate(-50%, -20%) rotate(-45deg);transform:translate(-50%, -20%) rotate(-45deg)}

19}

20@keyframes gtjumpb{0%{-webkit-transform:translate(-50%, 0) rotate(-45deg);transform:translate(-50%, 0) rotate(-45deg)}

2150%{-webkit-transform:translate(-50%, 20%) rotate(-45deg);transform:translate(-50%, 20%) rotate(-45deg)}

22100%{-webkit-transform:translate(-50%, -20%) rotate(-45deg);transform:translate(-50%, -20%) rotate(-45deg)}

23}

24',go:null,default:{z:1e3,s:"50px",x:"50px",y:"50px",r:"50%",bg:"#515151b0",color:"#ffffffb0",thr:2}

25,init:args=>{let knob=document.createElement("div");knob.setAttribute("id","go-top"),knob.addEventListener("click",goTop.click),document.body.appendChild(knob);let v,vars="";if("object"==typeof args)for(let arg in goTop.default)v="thr"===arg?"number"==typeof args[arg]?args[arg]:goTop.default[arg]:"z"===arg?"number"==typeof args[arg]?args[arg]:goTop.default[arg]:void 0!==args[arg]?args[arg]:goTop.default[arg],vars+=`--gt${arg}

26:${v}

27;`;let css=document.createElement("style");css.innerText=goTop.css.replace("<vars>",vars),css.setAttribute("id","gotop-style"),document.head.appendChild(css),window.addEventListener("scroll",goTop.show),goTop.go=knob,goTop.show()}

28,click:()=>{window.scrollTo({top:0,behavior:"smooth"}

29)}

30,show:()=>{clearTimeout(goTop.timer),goTop.timer=setTimeout(()=>{window.scrollY>window.innerHeight*goTop.default.thr?goTop.go.classList.contains("show")||goTop.go.classList.add("show"):goTop.go.classList.contains("show")&&goTop.go.classList.remove("show")}

31,50)}

32}

33;